Question

使用：

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

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

$('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而不使用“disabled-opacity”：

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

Answer 4

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

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

使用JS而不是CSS自行设置边距。滚动条的宽度为17px，因此您可以获得边距，就像在代码示例中一样。当您不需要滚动锁定时，只需再次设置margin:auto; overflow-y:auto;即可。这种方法的缺点是，当用户放大时，他可能无法看到div的其余部分。
```
margin-left = (bodywidth - sitewidth) / 2 - 17;
margin-right = (bodywidth - sitewidth) / 2 + 17;
overflow-y:hidden;
```

用JS锁定滚动。参加window.onscroll - 活动。拿scrollMethod2来说，它更难，但几乎在任何方面都更好。这对我来说非常有效，没有滞后（没有＆＃39;回旋镖＆＃39;你回来了，你真的停留在滚动位置（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你可以找到一些例子。

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

4 个答案:

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

4 个答案:

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