Question

问题是：

我有一个全宽条形菜单，通过在右侧和左侧创建一个大边距来实现。这个边距应该被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中，它将只获得内部宽度而不是窗口宽度

Answer 1

我有同样的问题。我将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>

Answer 2

还有另一种方法可以通过一行代码修复此问题：

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

这解决了我在webkit（Mac）上的问题

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

Answer 3

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

解决了我的问题，除了IE之外 - 如果你努力这样做，你仍然可以将网站拖到右边。

使用overflow: hidden;删除垂直滚动条，因此这不是一个解决方案。

我无法使用JavaScript找到更好的解决方案。

Answer 4

我认为没有任何方法可以防止在不使用JavaScript的情况下滚动元素。但是，使用JS，将scrollLeft设置为0 onscroll非常容易。

Answer 5

我在这里找到了解决方案https://stackoverflow.com/a/9399429/622041

您可以在您的内容周围添加#wrapper。 <{1}}上的overflow:hidden无效。

body

这里是HTML：

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

Answer 6

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

用以下内容包装内容：

width: 100%; 
overflow: hidden;

这仅限制了宽度，并且在类似的场合工作也阻止了拖动时的滚动。

Answer 7

尝试使用固定位置的html元素，但禁用此方向滚动。

html {
    position: fixed;
}

Answer 8

如何在内容正文上设置宽度，并在#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])
          ...

CSS example

Answer 9

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

Answer 10

考虑对html使用max-width。

如果它不起作用，请告诉我。

overflow-x：隐藏仍然可以滚动

CSS

@Krazer

10 个答案: