Vue項(xiàng)目移動端滾動穿透問題的實(shí)現(xiàn)

更新時(shí)間：2020年05月19日 14:45:29 作者：饅頭加梨子

這篇文章主要介紹了Vue項(xiàng)目移動端滾動穿透問題的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

概述

今天在做 Vue 移動端項(xiàng)目的時(shí)候遇到了滾動穿透問題，在網(wǎng)上查資料后，選取了我覺得最好的方法，記錄下來供以后開發(fā)時(shí)參考，相信對其他人也有用。

上層無需滾動

如果上層無需滾動的話，直接屏蔽上層的 touchmove 事件即可。示例如下：

<div @touchmove.prevent>
我是里面的內(nèi)容
</div>

上層需要滾動

如果上層需要滾動的話，那么固定的時(shí)候先獲取 body 的滑動距離，然后用 fixed 固定，用 top 模擬滾動距離；不固定的時(shí)候用獲取 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àng)目移動端滾動穿透問題的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue 移動端滾動穿透內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue中json格式化顯示數(shù)據(jù)(vue-json-viewer)
這篇文章主要給大家介紹了關(guān)于vue中json格式化顯示數(shù)據(jù)(vue-json-viewer)的相關(guān)資料,Vue-json-viewer是一個(gè)Vue組件,用于在Vue應(yīng)用中顯示JSON數(shù)據(jù)的可視化工具,需要的朋友可以參考下
2024-05-05
詳解vue組件基礎(chǔ)
本篇文章給大家總結(jié)了vue組件基礎(chǔ)的相關(guān)知識點(diǎn)以及代碼實(shí)例，有需要的朋友可以學(xué)習(xí)參考下。
2018-05-05
vue-video-player?播放m3u8視頻流的實(shí)現(xiàn)
本文主要介紹了vue-video-player?播放m3u8視頻流的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
vue隨機(jī)驗(yàn)證碼組件的封裝實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了如何封裝一個(gè)隨機(jī)驗(yàn)證碼的VUE組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
Vue3源碼分析組件掛載創(chuàng)建虛擬節(jié)點(diǎn)
這篇文章主要為大家介紹了Vue3源碼分析組件掛載創(chuàng)建虛擬節(jié)點(diǎn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
Vue中watch和methods兩種屬性的作用
這篇文章主要介紹了Vue中watch和methods兩種屬性的作用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2023-02-02
Vue3.0之引入Element-plus ui樣式的兩種方法
本文主要介紹了Vue3.0之引入Element-plus ui樣式的兩種方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
Vue中的組件注冊方法及注意事項(xiàng)
在Vue中，組件是構(gòu)建頁面的基本單位。通過組件化開發(fā)，可以提高代碼的復(fù)用性和可維護(hù)性。組件的注冊方法包括全局注冊和局部注冊兩種方式。同時(shí)，需要注意組件名的命名規(guī)范、組件選項(xiàng)的定義方式、組件之間的通信等問題，以實(shí)現(xiàn)更好的組件復(fù)用和開發(fā)效率
2023-05-05
詳解vuejs之v-for列表渲染
這篇文章主要介紹了詳解vuejs之v-for列表渲染，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06
vue移動端時(shí)彈出側(cè)邊抽屜菜單效果
這篇文章主要介紹了vue移動端時(shí)彈出側(cè)邊抽屜菜單,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06