禁用水平滚动条，因为DIV的位置:absolute在页面之外

我有一个绝对位于页面"外部"的元素，但我希望浏览器（我使用的是Firefox 3）不要显示水平滚动条。似乎显示一个位于左侧的div（例如，具有"left:-20px"）是可以的，并且没有显示滚动条。然而，右边的相同内容（"right:-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>

是的，可以在html标记上键入style="overflow-x: hidden"。那就行了。。。

事实上，这可以使用直接的CSS来完成，而对页面宽度等没有任何限制

创建一个带有隐藏溢出的div，它绝对位于页面的左上角。使其宽度和高度达到100%
创建另一个相同但没有隐藏溢出的div
为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>

您要做的是在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;
}

希望有帮助：）

更新

为它创建了一个笔，请在此处查看

不太确定这是否有帮助，但您可以尝试将上述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索引堆叠在定义的div之上。

希望这能有所帮助。

我能够通过将元素的position属性更改为fixed:来解决此问题

position: fixed;

不再有此元素引起的水平滚动，但仍有其他元素引起的横向滚动。

放入以下样式的

html {overflow-x:hidden;}

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

将其添加到您的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

相关内容

最新更新

热门标签：