Vue項目移動端滾動穿透問題的實現(xiàn)
更新時間：2020年05月19日 14:45:29 作者：饅頭加梨子
這篇文章主要介紹了Vue項目移動端滾動穿透問題的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
概述
今天在做 Vue 移動端項目的時候遇到了滾動穿透問題，在網(wǎng)上查資料后，選取了我覺得最好的方法，記錄下來供以后開發(fā)時參考，相信對其他人也有用。
上層無需滾動
如果上層無需滾動的話，直接屏蔽上層的 touchmove 事件即可。示例如下：
<div @touchmove.prevent> 我是里面的內(nèi)容 </div>
上層需要滾動
如果上層需要滾動的話，那么固定的時候先獲取 body 的滑動距離，然后用 fixed 固定，用 top 模擬滾動距離；不固定的時候用獲取 top 的值，然后讓 body 滾動到之前的地方即可。示例如下：
<template>
<div @click="handleHambergerClick"></div>
</template>
<script>
export default {
name: 'BaseHeaderMobile',
data() {
return {
isHeaderVisible: false,
};
},
methods: {
handleHambergerClick() {
// hack: 滑動穿透問題
if (!this.isHeaderVisible) {
this.lockBody();
} else {
this.resetBody();
}
this.isHeaderVisible = !this.isHeaderVisible;
},
lockBody() {
const { body } = document;
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
body.style.position = 'fixed';
body.style.width = '100%';
body.style.top = `-${scrollTop}px`;
},
resetBody() {
const { body } = document;
const { top } = body.style;
body.style.position = '';
body.style.width = '';
body.style.top = '';
document.body.scrollTop = -parseInt(top, 10);
document.documentElement.scrollTop = -parseInt(top, 10);
},
},
};
</script>
到此這篇關(guān)于Vue項目移動端滾動穿透問題的實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue 移動端滾動穿透內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3全局掛載使用Axios學(xué)習(xí)實戰(zhàn)
這篇文章主要為大家介紹了Vue3全局掛載使用Axios學(xué)習(xí)實戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要介紹了vue v-model的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-08-08
vuejs+element UI點擊編輯表格某一行時獲取內(nèi)容填入表單的示例
這篇文章主要介紹了vuejs+element UI點擊編輯表格某一行時獲取內(nèi)容填入表單的示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要介紹了Vue實現(xiàn)雙向綁定的方法，了解vue的雙向數(shù)據(jù)綁定原理以及核心代碼模塊，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了vue事件處理原理及過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-03-03
Vue-element-admin?導(dǎo)出json和導(dǎo)入json文件的方法
這篇文章主要介紹了Vue-element-admin導(dǎo)出json和導(dǎo)入json文件,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
vue雙向數(shù)據(jù)綁定原理分析、vue2和vue3原理的不同點
這篇文章主要介紹了vue雙向數(shù)據(jù)綁定原理分析、vue2和vue3原理的不同點，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
今天小編就為大家分享一篇Vue封裝的可編輯表格插件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Vue Autocomplete 自動完成功能,結(jié)合簡單示例形式分析了Vue使用el-autocomplete組件實現(xiàn)自動完成功能相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vuex管理狀態(tài)倉庫使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07