移动端弹出浮动层内部滚动的解决方案
项目 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
对事件进行截断。
感谢使用。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于