Vue解決移動(dòng)端彈窗滾動(dòng)穿透問(wèn)題

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

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

一、問(wèn)題描述

在移動(dòng)端的H5頁(yè)面中，我們經(jīng)常會(huì)遇到 “點(diǎn)擊按鈕-->彈窗-->選擇選項(xiàng)” 這樣的場(chǎng)景。而在選項(xiàng)過(guò)多出現(xiàn)滾動(dòng)條時(shí)，滾動(dòng)滾動(dòng)條至容器的底部或者頂部。再往上或往下拖動(dòng)滾動(dòng)條時(shí)，滾動(dòng)動(dòng)作會(huì)出現(xiàn)穿透，這時(shí)候底部的body也會(huì)一起滾動(dòng)。
問(wèn)題總結(jié)：內(nèi)容在滾動(dòng)到容器的頂部或者底部時(shí)，再向上或向下強(qiáng)行滾動(dòng) ，則出現(xiàn)滾動(dòng)穿透

二、解決方案思考

參考了網(wǎng)上一大堆的解決方法，大可分為三類方法。經(jīng)過(guò)認(rèn)真的思考和分析，個(gè)人的總結(jié)如下:

使用js去控制和改變css

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

使用js去控制彈窗內(nèi)容區(qū)的默認(rèn)滾動(dòng)事件

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

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

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

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

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

三、初步實(shí)現(xiàn)

寫(xiě)成一個(gè)mixin

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

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

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

四、寫(xiě)法優(yōu)化

寫(xiě)成一個(gè)全局指令 no-through

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

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

// 使用vuex的保存一個(gè)全局變量
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) // 手指滑動(dòng)中觸摸位置
      let sTop = el.scrollTop // 內(nèi)容滾動(dòng)到容器頂部的高度
      let sHeight = el.scrollHeight // 內(nèi)容的可滾動(dòng)高度
      let cliHeight = el.clientHeight // 當(dāng)前內(nèi)容容器的高度
      if (sTop <= 0 && newTargetY - state.targetY > 0 && event.cancelable) {
        console.log('下拉到頁(yè)面頂部')
        event.preventDefault()
      } else if (sTop >= sHeight - cliHeight && newTargetY - state.targetY < 0 && event.cancelable) {
        console.log('上翻到頁(yè)面底部')
        event.preventDefault()
      }
    }
    el.addEventListener('touchstart', handleTouchstart)
    el.addEventListener('touchmove', handleTouchmove, false)
  },

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

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