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

I have an absolutely positioned element that is "outside" of the page, but I want browsers (I am using Firefox 3) not to display horizontal scrollbars. It seems that displaying a div that is positioned to the left (e.g. having "left: -20px") is okay, and no scrollbar is shown. However the same thing on the right ("right: -20px") always shows the scrollbar. Is it possible to hide the scrollbar, but to keep standard scrolling possible? I mean I only want to disable scrolling due to this absolute-positioned element, but to keep scrolling due to other elements (I know I can disable scrollbars completely, that's not what I want).

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

7 个解决方案

#1

Yes, it is possible, on your html tag, type style="overflow-x: hidden". That'll do the trick...

是的，可以在你的html标签上输入style =“overflow-x：hidden”。那就行了......

#2

This can in fact be done using straight CSS without having any restrictions on page width etc. It can be done by:

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

Create a div with hidden overflow that is absolutely positioned at the top left corner of the page. Make it's width and height 100%
创建一个隐藏溢出的div，它完全位于页面的左上角。使它的宽度和高度100％
Create another div that is the same, but without hidden overflow
创建另一个相同的div，但没有隐藏的溢出
Add a class for divs that wrap around the content of the ones created, making its position relative and giving it whatever width you want the main page content to have
为div创建一个包含所创建的内容的类，使其位置相对并为其提供您希望主页内容具有的任何宽度
Add content of that class in each of the divs you've created.
在您创建的每个div中添加该类的内容。

The content in your first div will stay properly aligned with the content of your second div, but any of its contents that go beyond the perimeter of the window will be truncated.

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

Here's a working example that keeps the image in a fixed position relative to the rest of the content, without using any JavaScript:

这是一个工作示例，它将图像保持在相对于其他内容的固定位置，而不使用任何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

What you have to do is to add a wrapper outside of your divs.

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

Here is the CSS: I call my class 'main_body_container'

这是CSS：我称我的班级为'main_body_container'

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

Hope it helps :)

希望能帮助到你：）

Update

更新

Created a Pen for it, see it here

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

#4

Not too sure if this would help but you can try changing the styling for the mentioned divs to this instead:

不太确定这是否会有所帮助，但您可以尝试将所提到的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>

By setting the position as fixed instead, it "locks" the specified divs in place while the rest of the content is still scrollable. Of course this is assuming that it is in the instance that the rest of the content is stacked by the z-index to be on top of the defined divs.

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

Hope this helps.

希望这可以帮助。

#5

Add this to your CSS:

将其添加到您的CSS：

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

The overflow-x and -y styles are not recognized by IE. So if you're only concerned with Firefox 3, this will work fine. Otherwise, you can use some javascript:

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

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

#6

I was able to solve this problem by changing the element's position attribute to fixed:

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

position:fixed;

位置是：固定;

No more horizontal scrolling caused by this element but still horizontal scrolling caused by other elements.

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

#7

Put the following style

放下以下风格

html {overflow-x:hidden;}

I tested it on IE 8, FF and Chrome.

我在IE 8，FF和Chrome上测试过它。

#1