移动端弹出浮动层内部滚动的解决方案
项目 github 地址 github
1. 介绍
在移动端开发的时候，未免会遇到这样的情况：
有一个弹出的浮动层，这个层有滚动条，可以上下滚动。
此时就会发现，当用户在操作这个浮层的时候，整个页面也可能会随之滚动。
ScrollPrevent.js就是为了解决这种情况而被制作的！
2. 使用方式
将 git 仓库内的 scrollPrevent.js 保存到本地。
在 HTML 的任何位置使用一句话引入
<script src="scrollPrevent.js"></script>
之后，在页面尾部为浮层元素添加
ScrollPrevent().init(dom)
其中，dom 为使用选择器选中的 HTML 原生 DOM 元素。比如
ScrollPrevent().init(document.querySelector("#show"))
之后我们可以发现，在移动端，浮层的滚动和整个页面的滚动彻底无关了！
3. 测试页面
可以使用移动设备访问测试页面
如果您正巧是用 PC 在访问本页面，可以拿起手机扫描下方的二维码，进行访问
如果还是不方便，可以参考以下页面源代码用您的最强大脑进行脑补生成。
<!doctype html>
<html>
<head>
<script src="scrollPrevent.js"></script>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta charset="utf-8"/>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
background: gray;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 101vh;
}
.show {
height: 200px;
width: 300px;
margin-top: 20px;
border: 1px solid black;
border-radius: 15px;
background: white;
overflow: scroll;
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="show">
<p>这是一个没有消除父元素滚动的div</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>这里是元素的底部</p>
</div>
<div class="show" id="show">
<p>这是一个消除了父元素滚动的div</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>这里是元素的底部</p>
</div>
</div>
</body>
<script>
ScrollPrevent().init(document.querySelector("#show"))
</script>
</html>
4. 实现方式
其实非常容易，只是判断了一下是否滚动到顶/底，如果是的话，就调用 preventDefault 对事件进行截断。
感谢使用。
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于