如何禁用网页中的滚动条？ （不是隐藏滚动条）

Question

使用：

$('body,html').css("overflow","hidden");

页面中的滚动条能够完全隐藏。但我希望滚动条在某些 AJAX 事件期间只是 DISABLED。稍后使用：

$('body,html').css("overflow","visible");

在我的 AJAX 成功中，我必须再次启用滚动以获取整页。

（就像从 scorllbar 中删除滚动框并禁用滚动箭头）但仍然滚动条出现在窗口中。这将同时防止页面宽度发生变化。

有没有可能这样做？ 任何帮助都会得到帮助。提前致谢。

Answer 1

好的，这是工作代码：

body
{
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

我用过，和你想要的一样。

Answer 2

试试这个

<style type="text/css">
  body {
         overflow:hidden;
       }
</style>

Answer 3

如果您想禁用滚动条的点击和拖动功能，您可以使用position: fixed; top: 0; right: 0; height: 100%; width: 25px;在滚动条前面渲染一个隐藏的 div

http://jsfiddle.net/Bg9zp/（htm-class 可以是你的 html/body）

所以它被禁用点击，但滚动功能未被禁用。 （您可以使用鼠标滚轮和“通过将鼠标拉出文本框来选择文本”滚动）

如果你想禁用滚动功能，你必须添加另一个 div 来禁用用户输入而没有“禁用不透明度”：

http://jsfiddle.net/dKP53/（htm-class 可以是你的 html/body）

Answer 4

我遇到了同样的问题。我认为 CSS 没有解决方案，因为它不是直接实现的。

我找到了 2 个解决方案，但我更喜欢第二个：

1. 使用 JS 而不是 CSS 自己设置边距。滚动条的宽度为 17px，因此您获得的边距，如代码示例中所示。当您不需要滚动锁定时，只需再次设置margin:auto; overflow-y:auto;。这种方法的缺点是，当用户放大时，他可能看不到 div 的其余部分。

   margin-left = (bodywidth - sitewidth) / 2 - 17;
   margin-right = (bodywidth - sitewidth) / 2 + 17;
   overflow-y:hidden;
   

2. 用 JS 锁定滚动。参加window.onscroll-事件。以scrollMethod2 为例，它更难，但几乎在任何方面都更好。这对我来说非常有效，没有滞后（不会'回飞棒'你回来，你真的停留在滚动位置（scrollMethod）或可滚动部分（scrollMethod2））。 这是一个示例：

   // scroll lock needed? Set it in your method
   var scrollLock = false;
   window.onresize = function() {
       if (scrollLock) {
           scrollMethod();
       }
   }
   
   // Set here your fix scroll position
   var fixYScrollPosition = 0;
   // this method makes that you only can scroll horizontal
   function scrollMethod(){
       // scrolls to position
       window.scrollTo(window.scrollX, fixYScrollPosition); // window.scrollX gives actual position
   }
   
   // when you zoom in or you have a div which is scrollable, you can watch only the height of the div
   function scrollMethod2() {
       var windowHeight = window.innerHeight;
       // the actual y scroll position
       var scrollHeight = window.scrollY;
       // the height of the div under the window
       var restHeight = scrollableDivHeight - (scrollHeight + windowHeight);
       // the height of the div over the window
       var topDivHeight = scrollHeight - /* the height of the content over the div */;
       // Set the scroll position if needed
       if (restHeight <= 0) {
           // don't let the user go under the div
           window.scrollTo(window.scrollX, scrollHeight + restHeight);
       }
       else if (scrollHeight - /* the height of the content over the div */ < 0) {
           // don't let the user go over the div
           window.scrollTo(window.scrollX, scrollHeight - topDivHeight);
       }
   }
   

希望一切都是正确的。感谢您的阅读，希望这对您有所帮助或给您一个想法，如何做到这一点:)

编辑： 您还可以隐藏标准滚动条并将其替换为自定义滚动条。 Here你可以找到一些例子。