Html 溢出-x：隐藏仍然可以滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8635799/
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
overflow-x:hidden still can scroll
提问by Nicos Karalis
The problem is:
问题是：
I have a full width bar menu, which is made by creating a big margin on the right and to the left. This margin should be cropped by overflow-x: hidden, and it is... no scroll bars, everything (visually) is ok...
我有一个全宽栏菜单，它是通过在右侧和左侧创建一个大边距来制作的。这个边距应该被裁剪overflow-x: hidden，它是......没有滚动条，一切（视觉上）都可以......
But, if you drag the page (using Mac Lion) or scroll to the right, the page shows an enormous bar, which should have been cropped by the overflow-x:hidden.
但是，如果您拖动页面（使用 Mac Lion）或向右滚动，页面会显示一个巨大的栏，它应该被overflow-x:hidden.
CSS
CSS
html {
margin:0;
padding:0;
overflow-x:hidden;
}
body {
margin: 0 auto;
width: 950px;
}
.full, .f_right {
margin-right: -3000px !important;
padding-right: 3000px !important;
}
.full, .f_left {
margin-left: -3000px !important;
padding-left: 3000px !important;
}
Here is a link: http://jsfiddle.net/NicosKaralis/PcLed/1/
这是一个链接：http: //jsfiddle.net/NicosKaralis/PcLed/1/
You have to open in draft to see... the jsfiddle css somehow makes it work.
你必须在草稿中打开才能看到...... jsfiddle css 以某种方式使它工作。
@Krazer
@克拉泽
i have and structure like this:
我有这样的结构：
body
div#container
div#menu_bar
div#links
div#full_bar
div#content_body
...
the #container is an centered div and has fixed width of 950px, the #full_bar is an bar that extends on the entire window, from one side to the other
#container 是一个居中的 div，固定宽度为 950px，#full_bar 是一个在整个窗口上从一侧延伸到另一侧的条形
if i put width 100% in #full_bar it will get only the inside width and not the width off the window
如果我将宽度 100% 放在 #full_bar 中，它将仅获得内部宽度而不是窗口外的宽度
采纳答案by powerbuoy
I don't think there's any way to prevent scrolling of an element without using JavaScript. With JS, though, it's pretty easy to set scrollLeft to 0 onscroll.
我认为没有任何方法可以在不使用 JavaScript 的情况下防止元素滚动。但是，使用 JS，将 scrollLeft 设置为 0 onscroll 非常容易。
回答by igneosaur
I had this exact same problem. I solved it by putting overflow-x: hidden;on boththe bodyand html.
我有这个完全相同的问题。我通过把解决它overflow-x: hidden;在两者的body和html。
html {
margin: 0 auto;
padding: 0;
overflow-x: hidden;
}
body {
margin: 0 auto;
overflow-x: hidden;
width: 950px;
}
.full {
background: red;
color: white;
}
.full,
.f_right {
margin-right: -3000px !important;
padding-right: 3000px !important;
}
.full,
.f_left {
margin-left: -3000px !important;
padding-left: 3000px !important;
}<div>
<div class="full">
abc
</div>
</div>回答by DD.
There is another way to fix this issue with one line of code:
还有另一种方法可以用一行代码解决这个问题：
body {
/* All your regular code including overflow-x: hidden; */
position:relative;
}
This solved my issues on webkit (Mac)
这解决了我在 webkit (Mac) 上的问题
Reference: http://www.tonylea.com/2010/safari-overflow-hidden-problem/
参考：http: //www.tonylea.com/2010/safari-overflow-hidden-problem/
回答by Daniel Antunes Pinto
html, body {
overflow-x: hidden;
width: 100%;
}
html, body {
overflow-x: hidden;
width: 100%;
}
Solved the issue for me, except for IE - you can still drag the site to the right if you make an effort to do so.
为我解决了这个问题，除了 IE - 如果您努力这样做，您仍然可以将站点向右拖动。
Using overflow: hidden;removes the vertical scrollbar, so this isn't a solution.
使用overflow: hidden;会删除垂直滚动条，因此这不是解决方案。
I couldn't manage to find a better solution using JavaScript.
我无法使用 JavaScript 找到更好的解决方案。
回答by kernel
I found the solution here https://stackoverflow.com/a/9399429/622041
我在这里找到了解决方案https://stackoverflow.com/a/9399429/622041
You'll haveto put a #wrapperaround your content. overflow:hiddenon the bodywon't work.
你将必须把一个#wrapper围绕您的内容。overflow:hidden在body行不通。
#wrapper {position: absolute; width: 100%; overflow-x: hidden}
And here the HTML:
这里是 HTML：
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div class="yourContent"> ... </div>
</div>
</body>
</html>
回答by MTJ
From Weaver's Offcanvas demo http://jasonweaver.name/lab/offcanvas/
来自 Weaver 的 Offcanvas 演示http://jasonweaver.name/lab/offcanvas/
Wrap content with:
用以下内容包装内容：
width: 100%;
overflow: hidden;
This limits only the width and has worked in similar occasions also has prevented scrolling while dragging.
这仅限制了宽度，并且在类似情况下也可以防止拖动时滚动。
回答by user2656130
Try the fixed position html element, but this disable scroll both direction.
尝试固定位置 html 元素，但这会禁用双向滚动。
html {
position: fixed;
}
回答by D3XT3R
Overflow on both the <body>and the <html>tags worked for me as well.
<body>和<html>标签上的溢出也对我有用。
回答by Krazer
How about setting the width on the content body, and warping the #containeraround the #menu_barand #content_body?
如何在内容主体上设置宽度，并#container在#menu_bar和周围扭曲#content_body？
body
div#container
div#menu_bar (absolute positioned)
div#links
div#full_bar
div#content_body (relative positioned + padding [#menu_bar height])
...
回答by ALH
Consider using max-width for html.
考虑对 html 使用 max-width。
keep me posted if it's not working.
如果它不起作用，请通知我。
