javascript - Hiding scroll bar causes the body to scroll up

Question

I've noticed that if trying to hide the scroll bar using overflow:hidden scrolls the site to the top if this CSS style is used for html and body elements:

html,body {
    height: 100%;
}

This is the jQuery code used:

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

Living demo: http://jsfiddle.net/hYNGn/

This happens in all major browsers: Chrome, Firefox, IE9, Opera...

How can avoid this behavior?

Thanks.

Answer 1

身体有height: 100%但孩子节点让他溢出。当您设置溢出以hidden使主体回到高度时：相对于窗口为 100%，因此它看起来像一个滚动。

你可以这样做来保持高度，但我看不出这样做的意义，而且它是 Chrome/Chromium 上的滚动条的错误

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

Answer 2

只设置body隐藏溢出：

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

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

Answer 3

也许这个？

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

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

Answer 4

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

广告：溢出隐藏到身体

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

广告这个：

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

并使用此点击事件：

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

Answer 5

尝试这个：

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