移动端弹出层没法滚动解决办法

时间 2020-03-17

原文原文链接

首先CSS层面，在<html>标签上增长一个类名，例如fascroll，而后配合以下CSS和JS代码：html

.,
.body {
    overflow: hidden;
}
.body {
    position: relative;
}fascrollfascrollfascroll

而后，当浮层出现的时候：浏览器

$('html').addClass('fascroll');

当浮层隐藏的时候：ide

$('html').removeClass('fascroll');

能够让一部分浏览器的窗体不能滚动，但不包括Safari等浏览器，怎么办呢？code

咱们能够在浮层touchmove的时候，阻止默认事件达到避免滚动的问题，例如：htm

$('aside').on('touchmove', function(event) {
    event.preventDefault();
});

这种处理兼容性强，效果最好，可是有一个问题，就是若是浮层本身也有滚动，那么这种处理会让浮层里面本身的滚动行为也没法触发，所以，咱们的处理要更进一步，以下：事件

移动端 弹出层 没法滚动 解决办法