Vue解決移動端彈窗滾動穿透問題

更新時間：2020年12月15日 10:12:33 作者：航少航少啊

這篇文章主要介紹了Vue解決移動端彈窗滾動穿透問題的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下

一、問題描述

在移動端的H5頁面中，我們經常會遇到 “點擊按鈕-->彈窗-->選擇選項” 這樣的場景。而在選項過多出現(xiàn)滾動條時，滾動滾動條至容器的底部或者頂部。再往上或往下拖動滾動條時，滾動動作會出現(xiàn)穿透，這時候底部的body也會一起滾動。
問題總結：內容在滾動到容器的頂部或者底部時，再向上或向下強行滾動，則出現(xiàn)滾動穿透

二、解決方案思考

參考了網上一大堆的解決方法，大可分為三類方法。經過認真的思考和分析，個人的總結如下:

使用js去控制和改變css

1. 彈窗出現(xiàn)
	1.1. 記錄點擊出現(xiàn)彈窗按鈕位置的scrollTop
	1.2. 給body樣式{'overflow': 'hidden'}
2. 彈窗關閉
	2.1. 取消body樣式{'overflow': 'hidden'}
	2.2. 給body樣式{'top': scrollTop}
  
優(yōu)點：實現(xiàn)簡單快捷
缺點：在彈窗一開一關的時間段，如果彈窗不是沾滿整個窗口，則會看到body閃爍

使用js去控制彈窗內容區(qū)的默認滾動事件

1. 彈窗出現(xiàn)
  1.1. 監(jiān)聽內容容器layoutBox的touchstart和touchmove事件
  1.2. 監(jiān)聽touchstart事件，得知手指開始滾動內容區(qū)的起始位置targetY
  1.3. 監(jiān)聽touchmove事件，得知滾動內容區(qū)的過程中，變化的位置newTargetY
  1.4. 拿到 內容滾動到容器頂部的距離 scrollTop / 內容可滾動的高度 scrollHeight / 當前容器的高度 clientHeight
  1.5. 在滾動到頂部和滾動到底部時，阻止內容容器的默認行為。（關鍵點）
2. 彈窗正常關閉

優(yōu)點：從出現(xiàn)滾動穿透問題的源頭出發(fā)，把問題解決，js實現(xiàn)不存在ios兼容問題
缺點：實機驗證，個別品牌的機型存在兼容性問題

彈窗內容區(qū)禁止?jié)L動，使用js模擬滾動條

1. 彈窗出現(xiàn) 
 1.1. 監(jiān)聽touchmove事件，全程阻止默認行為 
 1.2. 監(jiān)聽touchstart和touchmove事件記錄手指的移動距離，使用transform: translate3d()屬性，實現(xiàn)內容滾動 
2. 彈窗正常關閉

優(yōu)點：js實現(xiàn)不存在ios兼容問題
缺點：ios上丟失了原生滾動條的回彈體驗

三、初步實現(xiàn)

寫成一個mixin

/**
 * @author cunhang_wei
 * @description 解決彈窗內容區(qū)滾動穿透到body的問題
 * @param $refs.layoutBox 需要事先指定 內容容器
 */

export default {
  data () {
    return {
      targetY: 0
    }
  },

  mounted () {
    if (this.$refs.layoutBox) {
      this.$el.addEventListener('touchstart', this.handleTouchstart)
      this.$el.addEventListener('touchmove', this.handleTouchmove, false)
    }
    
  },

  methods: {
    handleTouchstart (e) {
      this.targetY = Math.floor(e.targetTouches[0].clientY) // 手指起始觸摸位置
      console.log('handleTouchstart', this.targetY)
    },
    handleTouchmove (e) {
      let layoutBox = this.$refs.layoutBox // 內容容器
      let newTargetY = Math.floor(e.targetTouches[0].clientY) // 手指滑動中觸摸位置
      let sTop = layoutBox.scrollTop // 內容滾動到容器頂部的高度
      let sHeight = layoutBox.scrollHeight // 內容的可滾動高度
      let cliHeight = layoutBox.clientHeight // 當前內容容器的高度
      if (sTop <= 0 && newTargetY - this.targetY > 0 && e.cancelable) {
        console.log('下拉到頁面頂部')
        e.preventDefault()
      } else if (sTop >= sHeight - cliHeight && newTargetY - this.targetY < 0 && e.cancelable) {
        console.log('上翻到頁面底部')
        e.preventDefault()
      }
    }
  }，
  
  beforeDestroy () {
    if (this.$refs.layoutBox) {
      this.$el.removeEventListener('touchstart', this.handleTouchstart)
      this.$el.removeEventListener('touchmove', this.handleTouchmove)  
    }
  }
}

寫完后發(fā)現(xiàn)每一次控制彈窗的滾動穿透，都需要引入這個 mixin 文件，未免有些累贅，查看了Vue的官方文檔，發(fā)現(xiàn)了一種更好的辦法，那就是全局指令

四、寫法優(yōu)化

寫成一個全局指令 no-through

/**
 * @author cunhang_wei
 * @description 解決彈窗內容區(qū)滾動穿透到body的問題（覆蓋率90%）
 **/

// @description 用法
// <ul v-no-through>
//  <li></li>
//  <li></li>
//</ul>

// 使用vuex的保存一個全局變量
import state from 'src/vuex/modules/home/state'
export default {
  name: 'no-through',

  bind: function (el, binding) {
    const handleTouchstart = function (event) {
      state.targetY = Math.floor(event.targetTouches[0].clientY) // 手指起始觸摸位置
    }
    const handleTouchmove = function (event) {
      let newTargetY = Math.floor(event.targetTouches[0].clientY) // 手指滑動中觸摸位置
      let sTop = el.scrollTop // 內容滾動到容器頂部的高度
      let sHeight = el.scrollHeight // 內容的可滾動高度
      let cliHeight = el.clientHeight // 當前內容容器的高度
      if (sTop <= 0 && newTargetY - state.targetY > 0 && event.cancelable) {
        console.log('下拉到頁面頂部')
        event.preventDefault()
      } else if (sTop >= sHeight - cliHeight && newTargetY - state.targetY < 0 && event.cancelable) {
        console.log('上翻到頁面底部')
        event.preventDefault()
      }
    }
    el.addEventListener('touchstart', handleTouchstart)
    el.addEventListener('touchmove', handleTouchmove, false)
  },

  unbind: function (el, binding) {
    // 重置全局變量 targetY
    state.targetY = 0
  }
}

// 最后再去 main.js 注冊為全局指令，即可使用。