Question

我有一个位于页面“外部”的绝对定位元素，但我希望浏览器（我使用的是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>

Answer 1

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

Answer 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>

Answer 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

Answer 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之上。

希望这有帮助。

Answer 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

Answer 6

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

位置是：固定;

此元素不再导致水平滚动，但仍会由其他元素引起水平滚动。

禁用水平滚动条，因为DIV位置：绝对位于页面之外

6 个答案: