web-dev-qa-db-ja.com

overflow-x：hiddenはまだスクロールできます

問題は：

全幅のバーメニューがあります。これは、左右に大きなマージンを作成することによって作成されます。このマージンはoverflow-x: hidden、それは...スクロールバーはありません。すべて（視覚的に）OKです...

ただし、（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が何らかの形で機能します。

@クラザー

私はこのような構造を持っています：

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

#containerは中央のdivであり、固定幅は950pxです。＃full_barは、ウィンドウ全体で一方から他方に伸びるバーです。

#full_barに幅100％を入力すると、ウィンドウの幅ではなく内側の幅のみが取得されます

htmlcssoverflow
43
Nicos Karalis

JavaScriptを使用せずに要素のスクロールを防ぐ方法はないと思います。ただし、JSでは、scrollLeftを0オンスクロールに設定するのは非常に簡単です。

6
powerbuoy

これとまったく同じ問題がありました。 overflow-x: hidden; on 両方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>
100
igneosaur

1行のコードでこの問題を修正する別の方法があります。

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

これでwebkit（Mac）の問題が解決しました

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

32
DD.

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

IEを除いて、私のために問題を解決しました-あなたがそうするための努力をするなら、あなたはまだ右にサイトをドラッグすることができます。

overflow: hidden;を使用すると、垂直スクロールバーが削除されるため、これは解決策ではありません。

JavaScriptを使用してより良いソリューションを見つけることができませんでした。

8
Daniel Antunes Pinto

ここで解決策を見つけました https://stackoverflow.com/a/9399429/622041

haveを使用して#wrapperコンテンツの周り。 overflow:hidden上のbodyは機能しません。

#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>
7
kernel

WeaverのOffcanvasデモから http://jasonweaver.name/lab/offcanvas/

コンテンツを次のものでラップします。

width: 100%; 
overflow: hidden;

これにより幅のみが制限され、同様の場合に機能し、ドラッグ中のスクロールも防止されました。

3
MTJ

固定位置のhtml要素を試しますが、これにより両方向のスクロールが無効になります。

html {
    position: fixed;
}
2
user2656130

両方のオーバーフロー<body> そしてその <html>タグも同様に機能しました。

0
D3XT3R

コンテンツ本文の幅を設定し、#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の例 。

0
Krazer