由于DIV在页面外部的position：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中的内容保持正确对齐，但是超出窗口范围的所有内容将被截断。这是一个有效的示例，可在不使用任何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-index堆叠在已定义的div上。希望这可以帮助。 ,将此添加到您的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

,我可以通过将element的position属性更改为fixed来解决此问题：位置：固定不再由该元素引起的水平滚动，而是由其他元素引起的水平滚动。 ,放以下样式 html {overflow-x:hidden;}

absolute div div position position 外部外部外部水平水平滚动滚动滚动禁用禁用禁用页面页面页面