一、問題描述
- 在移動端的H5頁面中，我們經(jīng)常會遇到 “點擊按鈕-->彈窗-->選擇選項” 這樣的場景。而在選項過多出現(xiàn)滾動條時，滾動滾動條至容器的底部或者頂部。再往上或往下拖動滾動條時，滾動動作會出現(xiàn)穿透，這時候底部的body也會一起滾動。
- 問題總結(jié)：內(nèi)容在滾動到容器的頂部或者底部時，再向上或向下 強行滾動 ，則出現(xiàn)滾動穿透
二、解決方案思考
參考了網(wǎng)上一大堆的解決方法，大可分為三類方法。經(jīng)過認真的思考和分析，個人的總結(jié)如下:
- 使用js去控制和改變css
|
1
2
3
4
5
6
7
8
9
|
1. 彈窗出現(xiàn) 1.1. 記錄點擊出現(xiàn)彈窗按鈕位置的scrollTop 1.2. 給body樣式{'overflow': 'hidden'}2. 彈窗關(guān)閉 2.1. 取消body樣式{'overflow': 'hidden'} 2.2. 給body樣式{'top': scrollTop} 優(yōu)點：實現(xiàn)簡單快捷缺點：在彈窗一開一關(guān)的時間段，如果彈窗不是沾滿整個窗口，則會看到body閃爍 |
- 使用js去控制彈窗內(nèi)容區(qū)的默認滾動事件
|
1
2
3
4
5
6
7
8
9
10
|
1. 彈窗出現(xiàn) 1.1. 監(jiān)聽內(nèi)容容器layoutBox的touchstart和touchmove事件 1.2. 監(jiān)聽touchstart事件，得知手指開始滾動內(nèi)容區(qū)的起始位置targetY 1.3. 監(jiān)聽touchmove事件，得知滾動內(nèi)容區(qū)的過程中，變化的位置newTargetY 1.4. 拿到 內(nèi)容滾動到容器頂部的距離 scrollTop / 內(nèi)容可滾動的高度 scrollHeight / 當前容器的高度 clientHeight 1.5. 在滾動到頂部和滾動到底部時，阻止內(nèi)容容器的默認行為。（關(guān)鍵點）2. 彈窗正常關(guān)閉優(yōu)點：從出現(xiàn)滾動穿透問題的源頭出發(fā)，把問題解決，js實現(xiàn)不存在ios兼容問題缺點：實機驗證，個別品牌的機型存在兼容性問題 |
- 彈窗內(nèi)容區(qū)禁止?jié)L動，使用js模擬滾動條
|
1
2
3
4
5
6
7
|
1. 彈窗出現(xiàn) 1.1. 監(jiān)聽touchmove事件，全程阻止默認行為 1.2. 監(jiān)聽touchstart和touchmove事件記錄手指的移動距離，使用transform: translate3d()屬性，實現(xiàn)內(nèi)容滾動 2. 彈窗正常關(guān)閉優(yōu)點：js實現(xiàn)不存在ios兼容問題缺點：ios上丟失了原生滾動條的回彈體驗 |
三、初步實現(xiàn)
寫成一個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 解決彈窗內(nèi)容區(qū)滾動穿透到body的問題 * @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) // 手指滑動中觸摸位置 let sTop = layoutBox.scrollTop // 內(nèi)容滾動到容器頂部的高度 let sHeight = layoutBox.scrollHeight // 內(nèi)容的可滾動高度 let cliHeight = layoutBox.clientHeight // 當前內(nèi)容容器的高度 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
|
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 解決彈窗內(nèi)容區(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 // 內(nèi)容滾動到容器頂部的高度 let sHeight = el.scrollHeight // 內(nèi)容的可滾動高度 let cliHeight = el.clientHeight // 當前內(nèi)容容器的高度 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的底層實現(xiàn)有關(guān)）
總結(jié)
- 解決問題關(guān)鍵在于：要清楚的知道 什么情況下才會發(fā)生滾動穿透
- 寫法的優(yōu)化，可以簡潔代碼，讓代碼更優(yōu)雅
以上就是Vue解決移動端彈窗滾動穿透問題的詳細內(nèi)容，更多關(guān)于vue 解決彈窗滾動穿透的資料請關(guān)注服務(wù)器之家其它相關(guān)文章！
原文鏈接：https://juejin.cn/post/6905643392324239367
