一、問題描述
- 在移動端的H5頁面中，我們經常會遇到 “點擊按鈕-->彈窗-->選擇選項” 這樣的場景。而在選項過多出現滾動條時，滾動滾動條至容器的底部或者頂部。再往上或往下拖動滾動條時，滾動動作會出現穿透，這時候底部的body也會一起滾動。
- 問題總結：內容在滾動到容器的頂部或者底部時，再向上或向下 強行滾動 ，則出現滾動穿透
二、解決方案思考
參考了網上一大堆的解決方法，大可分為三類方法。經過認真的思考和分析，個人的總結如下:
- 使用js去控制和改變css
|
1
2
3
4
5
6
7
8
9
|
1. 彈窗出現 1.1. 記錄點擊出現彈窗按鈕位置的scrollTop 1.2. 給body樣式{'overflow': 'hidden'}2. 彈窗關閉 2.1. 取消body樣式{'overflow': 'hidden'} 2.2. 給body樣式{'top': scrollTop} 優點：實現簡單快捷缺點：在彈窗一開一關的時間段，如果彈窗不是沾滿整個窗口，則會看到body閃爍 |
- 使用js去控制彈窗內容區的默認滾動事件
|
1
2
3
4
5
6
7
8
9
10
|
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
2
3
4
5
6
7
|
1. 彈窗出現 1.1. 監聽touchmove事件，全程阻止默認行為 1.2. 監聽touchstart和touchmove事件記錄手指的移動距離，使用transform: translate3d()屬性，實現內容滾動 2. 彈窗正常關閉優點：js實現不存在ios兼容問題缺點：ios上丟失了原生滾動條的回彈體驗 |
三、初步實現
寫成一個mixin
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
/** * @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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
/** * @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 解決彈窗滾動穿透的資料請關注服務器之家其它相關文章！
原文鏈接：https://juejin.cn/post/6905643392324239367
