web-dev-qa-db-ja.com

ページの外側にあるposition：absoluteのDIVにより、水平スクロールバーを無効にします

ページの「外側」にある絶対的に配置された要素がありますが、ブラウザ（Firefox 3を使用しています）に水平スクロールバーを表示しないようにします。左に配置されたdiv（たとえば、「left：-20px」を持つ）を表示しても問題ないようで、スクロールバーは表示されません。ただし、右側の同じもの（ "right：-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>
htmlcssxhtmlscrollbarcss-position
34
Tom

はい、可能です。htmlタグにstyle="overflow-x: hidden"。これでうまくいきます...

37
Vap0r

これは実際、ページ幅などの制限なしに、まっすぐなCSSを使用して実行できます。次の方法で実行できます。

  1. ページの左上隅に絶対に配置される非表示のオーバーフローを持つdivを作成します。幅と高さを100％にする
  2. 同じ、ただし隠れたオーバーフローのない別のdivを作成します
  3. 作成されたもののコンテンツをラップするdivのクラスを追加し、その位置を相対的にし、メインページのコンテンツに必要な幅を与えます
  4. 作成した各divにそのクラスのコンテンツを追加します。

最初のdivのコンテンツは2番目のdivのコンテンツと適切に位置合わせされますが、ウィンドウの境界を超えるコンテンツは切り捨てられます。

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>
24
Jacob Ewing

あなたがしなければならないことは、divの外にラッパーを追加することです。

CSSを次に示します。クラスを「main_body_container」と呼びます

.main_body_container {
    min-width: 1005px; /* your desired width */
    max-width: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
}

それが役に立てば幸い ：）

更新

ペンを作成しました。参照してください こちら

13
edwardmagbago

これが役立つかどうかはわかりませんが、代わりに上記の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>

代わりに位置を固定として設定することにより、指定されたdivを所定の位置に「ロック」し、残りのコンテンツは引き続きスクロール可能です。もちろん、これは、インスタンスの残りのコンテンツが、定義されたdivの上にあるz-indexによってスタックされることを前提としています。

お役に立てれば。

4
vynx

これをCSSに追加します。

div {
overflow-x:hidden;
overflow-y:hidden;
}

Overflow-xおよび-yスタイルはIEで認識されません。したがって、Firefox 3のみに関心がある場合は、これで問題ありません。それ以外の場合は、javascriptを使用できます。

document.documentElement.style.overflow = 'hidden';  // firefox, chrome
document.body.scroll = "no";    // ie only
2
Peter Kazazes

要素の位置属性を固定に変更することで、この問題を解決できました。

位置：固定;

この要素によって引き起こされる水平スクロールはもうありませんが、それでも他の要素によって引き起こされる水平スクロールです。

1
Laurence Presland

次のスタイルを入れて

html {overflow-x:hidden;}

IE 8、FFおよびChromeでテストしました。

1
sudip