移动端滚动穿透解决办法
问题
在滚动模态框里的内容的时候，背景（模态框下面的内容）也在跟着滚动
css 之 overflow: hidden
.modal-open {
&,
body {
overflow: hidden;
height: 100%;
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
页面弹出层上将 .modal-open 添加到 html 上，禁用 html 和 body 的滚动条，但是这个方案有两个缺点：
- 由于 html 和 body 的滚动条都被禁用，弹出层后页面的滚动位置会丢失，需要用 js 来还原。
- 页面的背景还是能够有滚的动的效果
js 之 touchmove + preventDefault
modal.addEventListener(
'touchmove',
(e) => {
e.preventDefault()
},
false,
)
1
2
3
4
5
6
7
2
3
4
5
6
7
这样用 js 阻止滚动后看起来效果不错了，但是也有一个缺点：弹出层里不能有其它需要滚动的内容（如大段文字需要固定高度，显示滚动条也会被阻止）
css 结合 js
body.modal-open {
position: fixed;
width: 100%;
}
1
2
3
4
2
3
4
如果只是上面的 css，滚动条的位置同样会丢失。 所以如果需要保持滚动条的位置需要用 js 保存滚动条位置关闭的时候还原滚动位置。
/**
* ModalHelper helpers resolve the modal scrolling issue on mobile devices
* https://github.com/twbs/bootstrap/issues/15852
* requires document.scrollingElement polyfill https://github.com/yangg/scrolling-element
*/
const ModalHelper = (function(bodyCls) {
let scrollTop
return {
afterOpen() {
scrollTop = document.scrollingElement.scrollTop
document.body.classList.add(bodyCls)
document.body.style.top = `${-scrollTop}px`
},
beforeClose() {
document.body.classList.remove(bodyCls)
// scrollTop lost after set position:fixed, restore it back.
document.scrollingElement.scrollTop = scrollTop
},
}
})('modal-open')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
注意兼容 document.scrollingElement
看一下其他框架的处理办法
vant 有赞
// 打开的时候给body动态添加css 关闭的时候移除样式
open() {
/* istanbul ignore next */
if (this.$isServer || this.opened) {
return;
}
// 如果属性中传入了`zIndex`，则覆盖`context`中对应的`zIndex`
if (this.zIndex !== undefined) {
context.zIndex = this.zIndex;
}
this.opened = true;
this.renderOverlay();
if (this.lockScroll) {
on(document, 'touchstart', this.touchStart);
on(document, 'touchmove', this.onTouchMove);
if (!context.lockCount) {
document.body.classList.add('van-overflow-hidden');
}
context.lockCount++;
}
},
close() {
if (!this.opened) {
return;
}
if (this.lockScroll) {
context.lockCount--;
off(document, 'touchstart', this.touchStart);
off(document, 'touchmove', this.onTouchMove);
if (!context.lockCount) {
document.body.classList.remove('van-overflow-hidden');
}
}
this.opened = false;
manager.close(this._popupId);
this.$emit('input', false);
},
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
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
mand-mobile
// 滚动的时候阻止默认事件 排除的元素及子节点继续执行绑定事件
$_preventScroll(isBind) {
const handler = isBind ? 'addEventListener' : 'removeEventListener'
const masker = this.$el.querySelector('.md-popup-mask')
const boxer = this.$el.querySelector('.md-popup-box')
masker && masker[handler]('touchmove', this.$_preventDefault, false)
boxer && boxer[handler]('touchmove', this.$_preventDefault, false)
this.$_preventScrollExclude(isBind)
},
$_preventScrollExclude(isBind, preventScrollExclude) {
const handler = isBind ? 'addEventListener' : 'removeEventListener'
preventScrollExclude = preventScrollExclude || this.preventScrollExclude
const excluder =
preventScrollExclude && typeof preventScrollExclude === 'string'
? this.$el.querySelector(preventScrollExclude)
: preventScrollExclude
excluder && excluder[handler]('touchmove', this.$_stopImmediatePropagation, false)
},
$_preventDefault(event) {
event.preventDefault()
},
$_stopImmediatePropagation(event) {
/* istanbul ignore next */
event.stopImmediatePropagation()
},
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25