由于具有位置的DIV禁用水平滚动条：绝对在页面之外答案

【问题标题】：Disable horizontal scrollbar due to a DIV with position:absolute which is outside of the page由于具有位置的DIV禁用水平滚动条：绝对在页面之外
【发布时间】：2011-08-31 23:51:45
【问题描述】：

我有一个绝对定位的元素，它位于页面“外部”，但我希望浏览器（我使用的是 Firefox 3）不显示水平滚动条。似乎显示位于左侧的 div（例如，具有“left：-20px”）是可以的，并且不显示滚动条。然而，右侧的相同内容（“右：-20px”）始终显示滚动条。是否可以隐藏滚动条，但可以保持标准滚动？我的意思是我只想因为这个绝对定位的元素而禁用滚动，但是因为其他元素而继续滚动（我知道我可以完全禁用滚动条，这不是我想要的）。

<!DOCTYPE html>
<html>
<body>
  <div id="el1" style="position: absolute; top: 0; background-color: yellow; left: -20px;">
    element
  </div>
  <div id="el2" style="position: absolute; top: 0; background-color: yellow; right: -20px;">
    element
  </div>
  <h1>Hello</h1>
  <p>world</p>
</body>
</html>

【问题讨论】：

没有。不是没有 hacky javascripts。
如果你找到了你的答案，请用支票标记它吗？
@Vap0r 对不起...我在错误的线程...大声笑...有这么多的问题悬而未决，我认为这是我的！（是的，我是个白痴！:)）
为什么不将 div 设置为display:none？

标签： html css xhtml scrollbar css-position

【解决方案1】：

是的，可以在您的 html 标记上输入style="overflow-x: hidden"。这样就可以了...

【讨论】：

明确表示他不想关闭滚动，只是不想让那个特定元素绊倒滚动条。所以不幸的是，这并不能真正起到作用。

【解决方案2】：

这实际上可以使用直接的 CSS 来完成，而对页面宽度等没有任何限制。可以通过以下方式完成：

创建一个隐藏溢出的 div，它绝对位于页面的左上角。使其宽度和高度为 100%
创建另一个相同的 div，但没有隐藏溢出
为 div 添加一个类，该类环绕创建的内容，使其位置相对，并为其提供您希望主页内容具有的任何宽度
在您创建的每个 div 中添加该类的内容。

您的第一个 div 中的内容将与您的第二个 div 的内容保持正确对齐，但超出窗口周边的任何内容都将被截断。

这是一个工作示例，它使图像相对于内容的其余部分保持在固定位置，而不使用任何 JavaScript：

#widthfitter {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#contentWrapper {
  width: 100%;
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
}

.content {
  width: 600px;
  position: relative;
  text-align: left;
  margin: auto;
}

<div id="widthfitter">
  <div class="content">
    <img src="https://i.stack.imgur.com/U5V5x.png" style="position:absolute; top: 240px; left: 360px" />
  </div>
</div>
<div id="contentWrapper">
  <div class="content">
    Tested successfully on:
    <ul>
      <li>IE 8.0.6001.18702IS</li>
      <li>Google Chrome 17.0.963.46 beta</li>
      <li>Opera 10.10</li>
      <li>Konqueror 4.7.4</li>
      <li>Safari 5.1.5</li>
      <li>Firefox 10.0</li>
    </ul>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
      ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
      augue duis dolore te feugait nulla facilisi.
    </p>
  </div>
</div>

【讨论】：

这确实很好用，感谢您的解决方案。

【解决方案3】：

你要做的是在你的 div 之外添加一个包装器。

这是 CSS：我将我的类称为“main_body_container”

.main_body_container {
    min-width: 1005px; /* your desired width */
    max-width: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
}

希望对你有帮助:)

更新

为它创建了一支笔，请看here

【讨论】：

这样一个简单的解决方案。谢谢！

【解决方案4】：

不太确定这是否会有所帮助，但您可以尝试将上述 div 的样式更改为：

<div id="el1" style="position:fixed; left:-20px; top:0; background-color:yellow; z-index:-1">element</div>

<div id="el2" style="position:fixed; left:20px; top:0; background-color:yellow; z-index:-1">element</div>

通过将位置设置为固定，它将指定的 div“锁定”在适当的位置，而其余内容仍可滚动。当然，这是假设在实例中，其余内容通过 z-index 堆叠在已定义的 div 之上。

希望这会有所帮助。

【讨论】：

【解决方案5】：

将此添加到您的 CSS：

div {
overflow-x:hidden;
overflow-y:hidden;
}

IE 无法识别overflow-x 和-y 样式。因此，如果您只关心 Firefox 3，这将可以正常工作。否则，您可以使用一些javascript：

document.documentElement.style.overflow = 'hidden';  // firefox, chrome
document.body.scroll = "no";    // ie only

【讨论】：

【解决方案6】：

我可以通过将元素的位置属性更改为固定来解决这个问题：

位置：固定；

不再由该元素引起水平滚动，但仍由其他元素引起水平滚动。

【讨论】：

【解决方案7】：

放下面的样式

html {overflow-x:hidden;}

我在 IE 8、FF 和 Chrome 上对其进行了测试。

【讨论】：