scrollprevent
v1.0.0
Published
纯原生JS,移动端阻止页面元素滚动插件
Downloads
1
Readme
ScrollPrevent
纯原生JS,移动端阻止页面元素滚动插件
介绍
在移动端开发的时候,未免会遇到这样的情况: 有一个弹出的浮动层,这个层有滚动条,可以上下滚动。 此时就会发现,当用户在操作这个浮层的时候,整个页面也可能会随之滚动。
ScrollPrevent.js
就是为了解决这种情况而被制作的!
支持
IE 9+ / 现代化手机浏览器
使用方式
将dist/index.js保存到本地。 在HTML的任何位置使用一句话引入
<script src="index.js"></script>
之后,在页面尾部为浮层元素添加
window.ScrollPrevent.init(dom)
其中,dom为使用选择器选中的HTML原生DOM元素。比如
window.ScrollPrevent.init(document.querySelector("#show"))
之后我们可以发现,浮层的滚动和整个页面的滚动彻底无关了!
当然,想取消ScrollPrevent
的效果也很容易。ScrollPrevent.init(dom)
方法的会返回一个函数,调用它就可以取消。
就像这样
const unPrevent = window.ScrollPrevent.init(document.querySelector("#show"));
// 当你不想用时
unPrevent();
测试页面
可以使用移动设备访问测试页面
如果您正巧是用PC在访问本页面,可以拿起手机扫描下方的二维码,进行访问
!!新特性
您可以直接访问PC页面,体验ScrollPrevent
。测试页面
感谢使用。