移动端禁止页面滑动

最新推荐文章于 2024-05-08 17:08:39 发布

原创最新推荐文章于 2024-05-08 17:08:39 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css

本文介绍了一种通过JavaScript阻止移动端页面出现多余滚动条的方法，并提供了一个实用的函数来控制页面是否允许滚动。

描述一下遇到的问题：
移动端界面右边和底部都出现了滚动条，页面可以左右滑动
然后关于宽度和高度，我是用js获取了页面的宽度然后设置的宽度，但是还是出现了这种滚动条，在检查页面无论怎么调整还是存在！真是折磨死我啦！！！
在这里插入图片描述
最后解决方案：

   //禁止页面滑动

        function stopScroll() {
             var html = document.getElementsByTagName('html')[0];
             var body = document.getElementsByTagName('body')[0];
             var o = {};
             o.can = function () {
                 html.style.overflow = "visible";
                 html.style.height = "auto";
                 body.style.overflow = "visible";
                 body.style.height = "auto";
             },
                 o.stop = function () {
                     html.style.overflow = "hidden";
                     html.style.height = "100%";
                     body.style.overflow = "hidden";
                     body.style.height = "100%";
                 }
             return o
         }

         var scroll = stopScroll()
         scroll.stop()  //禁止页面滚动