Question

我注意到如果尝试使用overflow:hidden隐藏滚动条，如果此CSS样式用于html和body元素，则会将网站滚动到顶部：

html,body {
    height: 100%;
}

这是使用的jQuery代码：

$('#end').click(function(){
        $("html, body").css("overflow", "hidden");
});

生活演示：http://jsfiddle.net/hYNGn/

所有主流浏览器都会出现这种情况：Chrome，Firefox，IE9，Opera ......

如何避免这种行为？

感谢。

Answer 1

身体有height: 100%，但是儿童节点让他溢出。当你将溢出设置为hidden时，身体会回到高度：相对于窗口的100％，所以它看起来像一个滚动。

你可以这样做以保持身高，但是我没有看到这样做的意义，而且它会破坏Chrome / Chromium上的滚动条

$("html, body").css({
    "overflow": "hidden",
    "height": "auto"
});

Answer 2

也许这个？

http://jsfiddle.net/hYNGn/2/

$('#end').click(function(){
    var thetop = - $(window).scrollTop();
    $("div.demo").css("margin-top",thetop);
    $("html, body").css("overflow", "hidden");
});

Answer 3

仅设置正文以隐藏溢出：

$('#end').click(function(){
  $("body").css("overflow", "hidden");
});

http://jsfiddle.net/jaap/hYNGn/5/

Answer 4

试试这个：

$('#end').click(function(){
        $("html, body").css("overflow", "hidden");
        var bodyElement = $("body");
        bodyElement.scrollTop(bodyElement.height());
});

Answer 5

您的问题的最佳解决方法是将滚动部分移动到div。

广告：溢出隐藏在身体

html,body {
 height: 100%;
 overflow: hidden;
}

.demo {
 width: 100%;
 height: 100%;
 overflow: auto;
 position: absolute;
}

并使用此点击事件：

$('#end').click(function(){
 $("div.demo").css("overflow", "hidden");
});

隐藏滚动条会导致身体向上滚动

5 个答案: