隐藏滚动条会导致正文向上滚动答案

【问题标题】：Hiding scroll bar causes the body to scroll up隐藏滚动条会导致正文向上滚动
【发布时间】：2013-10-08 00:56:48
【问题描述】：

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

html,body {
    height: 100%;
}

这是使用的 jQuery 代码：

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

现场演示：http://jsfiddle.net/hYNGn/

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

如何避免这种行为？

谢谢。

【问题讨论】：

@epascarello 我说的是垂直滚动。无论内容如何，它都会向上滚动页面。
@epascarello 事实上。在手机上（至少是 iPhone），滚动条在身体上方，不会“吃掉”任何空间。
我在我的纵向监视器上运行它，当我运行你的代码时，内容向上移动[没有可用的滚动]。我以为这就是你所说的。我误读了关于滚动的问题。

标签： javascript jquery html css web

【解决方案1】：

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

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

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

【讨论】：

那么您建议的解决方案是什么？隐藏滚动条在使用图层时很常见，但在触摸设备上使用它们时更是如此。

【解决方案2】：

也许是这个？

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

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

【讨论】：

它确实有效，但是......这看起来更像是作弊而不是正确的解决方案:)
这不是作弊 - 这是一个适当的解决方案。我不明白为什么这会是一个问题：事实上，通过移除滚动条，您正在破坏用户的滚动位置，因为主体高度已降低到视口的高度。为努力点赞。
@Terry 它正在修改边距。然后，如果我想恢复正常，我仍然会遇到完全相同的问题。
@Alvaro 当您想恢复到“正常”状态时，您可以简单地将边距切换回零。无论如何，这里的所有解决方案都需要切换回正常状态。
@Terry 并将其返回到 0 会再次向上滚动站点，这与我试图避免的事情相同，但这次关闭了。

【解决方案3】：

只设置body隐藏溢出：

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

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

【讨论】：

【解决方案4】：

试试这个：

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

【讨论】：

【解决方案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");
});

【讨论】：