16

使用：

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

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

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

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

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

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

4

4 回答 4

22

好的，这是工作代码：

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

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

于 2013-09-17T12:42:15.390 回答
12

尝试这个

<style type="text/css">
  body {
         overflow:hidden;
       }
</style>
于 2013-09-17T12:42:54.120 回答
0

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

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

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

如果要禁用滚动功能，则必须添加另一个禁用用户输入的 div，而无需“禁用不透明度”：

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

于 2013-09-17T12:44:56.080 回答
0

我有同样的问题。我认为 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);
    }
}

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

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

于 2016-12-23T07:54:21.777 回答