移动端弹出浮动层内部滚动的解决方案

移动端弹出浮动层内部滚动的解决方案

项目 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>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>这里是元素的底部</p>
    </div>
    <div class="show" id="show">
        <p>这是一个消除了父元素滚动的div</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>这里是元素的底部</p>
    </div>
</div>
</body>
<script>
ScrollPrevent().init(document.querySelector("#show"))
</script>
</html>

4. 实现方式

实现
其实非常容易,只是判断了一下是否滚动到顶 / 底,如果是的话,就调用preventDefault对事件进行截断。

感谢使用。