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

How to DISABLE scrollbar in webpage? (not HIDE scrollbar)

提问by ram

using:

使用：

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

the scrollbar in the page was able to hide completely. But i want the scroll bar just to be DISABLEDduring some AJAX event. Later using:

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

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

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

I had to enable scrolling again for full page in my AJAX success.

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

(Like removing scrollbox from scorllbar and disabling scrolling arrows)yet still scrollbar appears in th window. This would prevent from change of page width in meantime.

（比如从 scorllbar 中删除滚动框并禁用滚动箭头）但滚动条仍然出现在 th 窗口中。这将防止同时更改页面宽度。

Is there any possibilitioes to do so? Any help is appriciated. Thanks in advance.

有没有可能这样做？任何帮助是appriciated。提前致谢。

回答by Hassan Sardar

OK here is the Working Code:

好的，这是工作代码：

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

I used it and its the same what you want.

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

回答by Ajay

Try this

尝试这个

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

回答by Varon

If you want to disable the scrollbar click- and drag-function you can render a hidden div in front of the scrollbar with position: fixed; top: 0; right: 0; height: 100%; width: 25px;

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

http://jsfiddle.net/Bg9zp/(htm-class could be your html/body)

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

So it is disabled for clicks, but the scroll-functionality is'nt disabled. (you can scroll with mousewheel and with "select text by pulling mouse out of the textbox")

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

If you want to disable the scroll-functionality, you have to add another div that disable user input without the "disabled-opacity":

如果你想禁用滚动功能，你必须添加另一个禁用用户输入的 div 没有“disabled-opacity”：

http://jsfiddle.net/dKP53/(htm-class could be your html/body)

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

回答by This man again

I had the same problem. I think there isn't a solution with CSS because it's not implemented directly.

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

I have found 2 solutions, but I like the second one more:

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

1. Set the margin by yourself with JS and not with CSS. The scrollbar has a width of 17px, so the margins you get, like in the code sample. when you don't need the scroll lock, just set margin:auto; overflow-y:auto;again. The disadvantage of this method is, when the user zooms in, he maybe can't see the rest of the div.

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

2. Lock the scrolling with JS. Take the window.onscroll-event. Take the scrollMethod2, it's more difficult, but it's better in nearly any way. This works perfectly for me without lag (doesn't 'boomerang' you back, you really stay at the scroll position (scrollMethod) or in the scrollable part (scrollMethod2)). Here a sample:

   // 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);
       }
   }
   

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

Hope everything is correct. Thank you for reading, hope this helps you or gave you an idea, how to do it :)

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

EDIT: You can also hide the standard scrollbar and replace it with a custom one. Hereyou can find some examples.

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