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

Question

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

Tom*_*Tom 34 html css xhtml css-position scrollbar

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Vap*_*p0r 38

是的,可以在你的html标签上输入style="overflow-x: hidden".那就行了......

具体说他不想关闭滚动,只是不希望特定元素跳转滚动条.所以不幸的是,这并没有真正做到这一点. (23认同)

Answer 2

Jac*_*ing 24

事实上,这可以使用直接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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 3

edw*_*ago 13

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

Run Code Online (Sandbox Code Playgroud)

希望能帮助到你 :)

更新

为它创建了一支笔,请在此处查看

归档时间：	14 年，7 月前
查看次数：	86184 次
最近记录：	8 年，5 月前