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