jQuery JS 禁用滚动条和启用滚动条

最新推荐文章于 2024-09-16 07:17:33 发布

一人一旧城

最新推荐文章于 2024-09-16 07:17:33 发布

阅读量5.8k

点赞数 1

分类专栏： JavaScript 文章标签：禁用滚动条启用滚动条

本文链接：https://blog.csdn.net/u012725119/article/details/77488674

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS：

.lock {
            overflow: hidden;
            touch-action: none;
        }

            .lock body {
                overflow: hidden;
                touch-action: none;
                margin-right: 17px;
            }

            .lock.mobile body {
                margin-right: 0;
            }

JS：

var methods = {
            /** 禁用滚动*/
            forbidScroll: function () {
                document.querySelector("html").classList.add("lock");
                window.addEventListener("mousewheel", this.forbidScroll);
                window.addEventListener("touchmove", this.forbidScroll, { passive: false });
            },
            /** 启用滚动*/
            enabledScroll: function () {
                document.querySelector("html").classList.remove("lock");
                window.removeEventListener("mousewheel", this.forbidScroll);
                window.removeEventListener("touchmove", this.forbidScroll, { passive: false });
            }
        }

调用方法：

    $("#test1").click(function () {
        methods.forbidScroll();
    });
    $("#test2").click(function () {
        methods.endabledScroll();
    });