1.0.0 • Published 6 years ago

scrollprevent v1.0.0

Weekly downloads
5
License
ZJH
Repository
-
Last release
6 years ago

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测试页面

感谢使用。