溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何實(shí)現(xiàn)Vue項(xiàng)目移動(dòng)端滾動(dòng)穿透

發(fā)布時(shí)間：2020-07-23 14:25:05 來源：億速云 閱讀：358 作者：小豬 欄目：web開發(fā)

這篇文章主要為大家展示了如何實(shí)現(xiàn)Vue項(xiàng)目移動(dòng)端滾動(dòng)穿透，內(nèi)容簡而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會(huì)有收獲的，下面讓小編帶大家一起來看看吧。

概述

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

上層無需滾動(dòng)

如果上層無需滾動(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)穿透問題
   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)于如何實(shí)現(xiàn)Vue項(xiàng)目移動(dòng)端滾動(dòng)穿透的內(nèi)容，如果你們有學(xué)習(xí)到知識(shí)或者技能，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手