js、jq禁用滚动条和启用滚动条

如何使用js或jq来禁用滚动条和启用滚动条呢？

一. 简单的写法，即单纯隐藏和显示滚动条，实现功能的方法代码如下：

1. 禁止滚动条

//禁止滚动条
$(document.body).css({
    "overflow-y": "hidden"
});

2. 启用滚动条

//启用滚动条
$(document.body).css({
    "overflow-y": "auto"
});

二. 比较复杂的写法，含有css样式，实现功能的代码如下：

1. css样式

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

2. 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 });
        }
 }

3. 调用上述方法

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

具体使用哪种方法来实现禁用滚动条和启用滚动条的功能，看自己的需求啦，也可自己修改一下代码来实现你自己需要的效果