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

二、解決方案思考

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

使用js去控制和改變css

1. 彈窗出現1.1. 記錄點擊出現彈窗按鈕位置的scrollTop1.2. 給body樣式{’overflow’: ’hidden’}2. 彈窗關閉2.1. 取消body樣式{’overflow’: ’hidden’}2.2. 給body樣式{’top’: scrollTop} 優點：實現簡單快捷缺點：在彈窗一開一關的時間段，如果彈窗不是沾滿整個窗口，則會看到body閃爍 使用js去控制彈窗內容區的默認滾動事件

1. 彈窗出現 1.1. 監聽內容容器layoutBox的touchstart和touchmove事件 1.2. 監聽touchstart事件，得知手指開始滾動內容區的起始位置targetY 1.3. 監聽touchmove事件，得知滾動內容區的過程中，變化的位置newTargetY 1.4. 拿到 內容滾動到容器頂部的距離 scrollTop / 內容可滾動的高度 scrollHeight / 當前容器的高度 clientHeight 1.5. 在滾動到頂部和滾動到底部時，阻止內容容器的默認行為。（關鍵點）2. 彈窗正常關閉優點：從出現滾動穿透問題的源頭出發，把問題解決，js實現不存在ios兼容問題缺點：實機驗證，個別品牌的機型存在兼容性問題 彈窗內容區禁止滾動，使用js模擬滾動條

1. 彈窗出現 1.1. 監聽touchmove事件，全程阻止默認行為 1.2. 監聽touchstart和touchmove事件記錄手指的移動距離，使用transform: translate3d()屬性，實現內容滾動 2. 彈窗正常關閉優點：js實現不存在ios兼容問題缺點：ios上丟失了原生滾動條的回彈體驗三、初步實現

寫成一個mixin

/** * @author cunhang_wei * @description 解決彈窗內容區滾動穿透到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) } }}

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

四、寫法優化

寫成一個全局指令 no-through

/** * @author cunhang_wei * @description 解決彈窗內容區滾動穿透到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 注冊為全局指令，即可使用。實機測試 ios 測試通過 ios13 小米、紅米手機 測試通過 安卓10 一加手機 測試通過 安卓10 華為手機測試通過 emui11 安卓10 三星S8上存在兼容問題 （初略估計和 Samsung webView的底層實現有關）總結 解決問題關鍵在于：要清楚的知道 什么情況下才會發生滾動穿透 寫法的優化，可以簡潔代碼，讓代碼更優雅

以上就是Vue解決移動端彈窗滾動穿透問題的詳細內容，更多關于vue 解決彈窗滾動穿透的資料請關注好吧啦網其它相關文章！