overflow-x:hidden仍然可以滚动

问题是:

我有一个全宽的酒吧菜单,这是通过在右侧和左侧创build一个大的余量。 这个边距应该被overflow-x: hidden所裁剪,并且是…没有滚动条,一切(视觉上)都可以。

但是,如果您拖动页面(使用Mac Lion)或滚动到右侧,页面将显示一个巨大的条,该条应该已被overflow-x:hidden裁剪。

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

这是一个链接: http : //jsfiddle.net/NicosKaralis/PcLed/1/

你必须在草稿中看到… jsfiddle css以某种方式使其工作。

@Krazer

我有和像这样的结构:

 body div#container div#menu_bar div#links div#full_bar div#content_body ... 

#container是一个居中的div,固定宽度为950px,#full_bar是一个在整个窗口上从一侧延伸到另一侧

如果我把宽度100%#full_bar只会得到里面的宽度,而不是窗口的宽度

我不认为有什么方法可以防止在不使用JavaScript的情况下滚动元素。 然而,使用JS,将scrollLeft设置为0 onscroll非常简单。

我有这个完全相同的问题。 我通过把overflow-x: hidden;bodyhtml

 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> 

还有一种方法可以用一行代码来解决这个问题:

 body { /* All your regular code including overflow-x: hidden; */ position:relative; } 

这解决了我在webkit(Mac)上的问题

参考: http : //www.tonylea.com/2010/safari-overflow-hidden-problem/

html, body { overflow-x: hidden; width: 100%; }

解决了这个问题,除了IE浏览器 – 你仍然可以拖动网站的权利,如果你努力这样做。

使用overflow: hidden; 删除垂直滚动条,所以这不是一个解决scheme。

我无法设法使用JavaScriptfind更好的解决scheme。

我在这里find了解决schemehttps://stackoverflow.com/a/9399429/622041

你将不得不围绕你的内容#wrapperoverflow:hiddenbody上将无法正常工作。

 #wrapper {position: absolute; width: 100%; overflow-x: hidden} 

在这里的HTML:

 <html> <head> <title></title> </head> <body> <div id="wrapper"> <div class="yourContent"> ... </div> </div> </body> </html> 

来自Weaver的Offcanvas演示http://jasonweaver.name/lab/offcanvas/

用以下内容包装:

 width: 100%; overflow: hidden; 

这只限于宽度,并在类似场合下也拖动了滚动阻止。

尝试固定位置的HTML元素,但是这个禁用滚动两个方向。

 html { position: fixed; } 

<body><html>标签上的溢出也适用于我。

如何设置内容正文的宽度,并绕过#menu_bar#content_body#container

 body div#container div#menu_bar (absolute positioned) div#links div#full_bar div#content_body (relative positioned + padding [#menu_bar height]) ... 

CSS示例 。

考虑使用HTML的最大宽度。

如果它不工作,让我张贴。