一、問題描述
- 在移動(dòng)端的H5頁面中，我們經(jīng)常會(huì)遇到 “點(diǎn)擊按鈕-->彈窗-->選擇選項(xiàng)” 這樣的場景。而在選項(xiàng)過多出現(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)。
- 問題總結(jié)：內(nèi)容在滾動(dòng)到容器的頂部或者底部時(shí)，再向上或向下 強(qiáng)行滾動(dòng) ，則出現(xiàn)滾動(dòng)穿透
二、解決方案思考
參考了網(wǎng)上一大堆的解決方法，大可分為三類方法。經(jīng)過認(rèn)真的思考和分析，個(gè)人的總結(jié)如下:
- 使用js去控制和改變css
|
1
2
3
4
5
6
7
8
9
|
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)簡單快捷缺點(diǎn)：在彈窗一開一關(guān)的時(shí)間段，如果彈窗不是沾滿整個(gè)窗口，則會(huì)看到body閃爍 |
- 使用js去控制彈窗內(nèi)容區(qū)的默認(rèn)滾動(dòng)事件
|
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事件，得知手指開始滾動(dòng)內(nèi)容區(qū)的起始位置targetY 1.3. 監(jiān)聽touchmove事件，得知滾動(dòng)內(nèi)容區(qū)的過程中，變化的位置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)穿透問題的源頭出發(fā)，把問題解決，js實(shí)現(xiàn)不存在ios兼容問題缺點(diǎn)：實(shí)機(jī)驗(yàn)證，個(gè)別品牌的機(jī)型存在兼容性問題 |
- 彈窗內(nèi)容區(qū)禁止?jié)L動(dòng)，使用js模擬滾動(dòng)條
|
1
2
3
4
5
6
7
|
1. 彈窗出現(xiàn) 1.1. 監(jiān)聽touchmove事件，全程阻止默認(rèn)行為 1.2. 監(jiān)聽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兼容問題缺點(diǎn)：ios上丟失了原生滾動(dòng)條的回彈體驗(yàn) |
三、初步實(shí)現(xiàn)
寫成一個(gè)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ū)滾動(dòng)穿透到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) // 手指滑動(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('下拉到頁面頂部') 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)每一次控制彈窗的滾動(dòng)穿透，都需要引入這個(gè) mixin 文件，未免有些累贅，查看了Vue的官方文檔，發(fā)現(xiàn)了一種更好的辦法，那就是 全局指令
四、寫法優(yōu)化
寫成一個(gè)全局指令 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ū)滾動(dòng)穿透到body的問題（覆蓋率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('下拉到頁面頂部') 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 注冊為全局指令，即可使用。 |
實(shí)機(jī)測試
- ios 測試通過 ios13
- 小米、紅米手機(jī) 測試通過 安卓10
- 一加手機(jī) 測試通過 安卓10
- 華為手機(jī)測試通過 emui11 安卓10
- 三星S8上存在兼容問題 （初略估計(jì)和 Samsung webView的底層實(shí)現(xiàn)有關(guān)）
總結(jié)
- 解決問題關(guān)鍵在于：要清楚的知道 什么情況下才會(huì)發(fā)生滾動(dòng)穿透
- 寫法的優(yōu)化，可以簡潔代碼，讓代碼更優(yōu)雅
以上就是Vue解決移動(dòng)端彈窗滾動(dòng)穿透問題的詳細(xì)內(nèi)容，更多關(guān)于vue 解決彈窗滾動(dòng)穿透的資料請關(guān)注服務(wù)器之家其它相關(guān)文章！
原文鏈接：https://juejin.cn/post/6905643392324239367
