网站首页 » 前端开发 » 移动WEB » 移动端禁止页面滚动最佳实践
上一篇:
下一篇:

移动端禁止页面滚动最佳实践

在移动端禁止页面滚动非常的有用,比如在手机端弹出一个弹窗,并带有遮罩,此时你肯定不想让页面可以滚动,毕竟这个遮罩看起来就是这种感觉。下面我们分享一段很实用的代码。代码非常的精简,但恰到好处。

看这里
function preventDefaultHandler(e){
    e.preventDefault();
};
document.addEventListener('touchstart', preventDefaultHandler,false);//阻止默认滑动事件(绑定 touchstart)
document.removeEventListener('touchstart', preventDefaultHandler, false);//解除事件处理程序(解除绑定 touchstart)

就是这么简单,不信你试试。比如:在点弹出弹窗的时候先调用document.addEventListener() 方法,关闭弹窗时调用 document.removeEventListener() 方法就可以实现在移动端弹窗弹出时,禁止页面滚动,弹窗关闭后,页面又可以滚动的效果了。

在PC 端这种方法比使用CSS 中的 overflow:hidden  来实现禁止页面滚动的效果来得更好一些,如果使用过overflow:hidden 这个方法的同仁都会知道这种方法会导致滚动条消失,从而出现出页面左右抖动的问题,所以使用上面的方法来禁止页面中的滚动效果还是比较好的一种处理方式。只要把 touchmove 改成 滚轮事件名就可以了。例子可以参考下面:

看这里
// IE 及其实主流浏览器
document.addEventListener('mousewheel', preventDefaultHandler,false); 
document.removeEventListener('mousewheel', preventDefaultHandler, false);

// 火狐浏览器
document.addEventListener('DOMMouseScroll', preventDefaultHandler,false);
document.removeEventListener('DOMMouseScroll', preventDefaultHandler, false);

有时候我们需要隐藏滚动页,你可以用下面这行样式来实现:

看这里
.selector::-webkit-scrollbar { display: none }

.selector 可加可不加,不加则隐藏浏览器所有的滚动条。如果前面添加了.selector 类的话,那么只有添加了这个类的元素才会隐藏滚动条。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/mobile-forbidden-page-scrolling/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END