Html 由于位置的 DIV 位于页面之外，因此禁用水平滚动条：绝对
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6111823/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable horizontal scrollbar due to a DIV with position:absolute which is outside of the page
提问by Tom
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（例如具有“左：-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>
回答by Vap0r
Yes, it is possible, on your html tag, type style="overflow-x: hidden". That'll do the trick...
是的，可以在您的 html 标签上输入style="overflow-x: hidden". 这样就搞定了...
回答by Jacob Ewing
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%
- Create another div that is the same, but without hidden overflow
- 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
- Add content of that class in each of the divs you've created.
- 创建一个带有隐藏溢出的 div，该 div 绝对位于页面的左上角。使其宽度和高度为 100%
- 创建另一个相同但没有隐藏溢出的 div
- 为环绕创建的内容的 div 添加一个类，使其位置相对并为其提供您希望主页内容具有的任何宽度
- 在您创建的每个 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>回答by edwardmagbago
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
为它创建了一支笔，请在 此处查看
回答by vynx
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.
希望这可以帮助。
回答by Peter Kazazes
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 无法识别溢出-x 和-y 样式。因此，如果您只关心 Firefox 3，这将正常工作。否则，您可以使用一些 javascript：
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // ie only
回答by Laurence Presland
I was able to solve this problem by changing the element's position attribute to fixed:
我能够通过将元素的位置属性更改为固定来解决这个问题：
position:fixed;
位置：固定；
No more horizontal scrolling caused by this element but still horizontal scrolling caused by other elements.
不再由该元素引起的水平滚动，但仍由其他元素引起的水平滚动。
回答by sudip
Put the following style
把下面的样式
html {overflow-x:hidden;}I tested it on IE 8, FF and Chrome.
我在 IE 8、FF 和 Chrome 上对其进行了测试。
