一、問(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)彈窗按鈕位置的scrollTop1.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)

寫成一個(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) } }}

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

四、寫法優(yōu)化

寫成一個(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è)為全局指令，即可使用。實(shí)機(jī)測(cè)試 ios 測(cè)試通過(guò) ios13 小米、紅米手機(jī) 測(cè)試通過(guò) 安卓10 一加手機(jī) 測(cè)試通過(guò) 安卓10 華為手機(jī)測(cè)試通過(guò) emui11 安卓10 三星S8上存在兼容問(wèn)題 （初略估計(jì)和 Samsung webView的底層實(shí)現(xiàn)有關(guān)）總結(jié) 解決問(wèn)題關(guān)鍵在于：要清楚的知道 什么情況下才會(huì)發(fā)生滾動(dòng)穿透 寫法的優(yōu)化，可以簡(jiǎn)潔代碼，讓代碼更優(yōu)雅

以上就是Vue解決移動(dòng)端彈窗滾動(dòng)穿透問(wèn)題的詳細(xì)內(nèi)容，更多關(guān)于vue 解決彈窗滾動(dòng)穿透的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！