如何在不滚动内容的情况下删除滚动条？答案

【问题标题】：How to remove the scrollbar without scrolling the content?如何在不滚动内容的情况下删除滚动条？
【发布时间】：2011-12-10 01:00:26
【问题描述】：

我有一个使用对话框的网站。当我打开该对话框时，body 滚动条被隐藏，包含该对话框的div 的滚动条显示其滚动条。

但是，当我隐藏body 滚动条时，内容会移动到开头。打开对话框时如何保持内容的位置？

有关此问题的更多信息，请查看 Facebook 上的照片。当你点击一张照片时，我喜欢这样做。

【问题讨论】：

它是否可以滚动到顶部，因为您单击的链接有一个（可能为空的）URL 片段标识符，如下所示：<a href="#">...</a> ...并且处理“对话框”的 javascript 不是t 取消活动？
给我们看一个代码 sn-p 怎么样？ jsfiddle.net
您是说视口滚动回正文内容的顶部，还是正文内容本身由于移除滚动条释放的额外宽度而向上移动？
我只使用 CSS 解决了，使用 HTML 标签和 BODY 标签组合。

【解决方案1】：

您能给我们您正在使用的代码或您正在谈论的网站的链接吗？你是怎么隐藏滚动条的？

如果是通过将溢出样式属性更改为隐藏，那么我是否正确猜测这仅在您第一次显示对话框时发生，并且对话框的后续外观不会将内容移回顶部？如果是这样，我不确定防止这种情况的最佳方法，但快速破解是让您的 javascript 在加载时将“body 容器 div”的溢出样式属性分配为自动。

将以下内容添加到您的 javascript 的顶部：

window.onload = function ()
{
    document.getElementById('container').style.overflow = 'auto';
}

container 是包含“body”代码的 div 的 id。

【讨论】：

【解决方案2】：

尝试使用 JavaScript 将滚动条移动到位置： document.getElementById('container').scrollTop = 50;

上面会将滚动条 50pix 移动到顶部，您可以通过以下方式获得最大滚动高度： document.getElementById('container').scrollHeight

【讨论】：

【解决方案3】：

等等，我不太明白你的问题。如果您想隐藏滚动条，请使用 CSS 来隐藏它们。

<style type="text/css">
  selector {
    overflow: hidden;
  }
</style>

【讨论】：