大きな幅を持つdivの水平オフスクリーンオーバーフローを非表示にする

Question

大きな幅を持つ<div>の水平オフスクリーンオーバーフローを非表示にするにはどうすればよいですか？たとえば：

HTML：

<div class="example"> 
</div> 

CSS：div要素は、このような非常に大きい場合には起こらないようにするために

.example { 
    height: 100px; 
    width: 10000px; 
    background-color: black; 
    position: absolute; 
    overflow: hidden; 
} 

Here is an example fiddleスクロールバーが表示されて示して、私は願っています。

編集：親要素の隠しオーバーフロー-xを追加すると、幅の狭いiOSデバイスでは機能しません。

Answer 1

要素コンテナにoverflow: hiddenを設定できます。この場合、それは身体です。

body { 
    overflow: hidden; 
} 

Answer 2

CSSでoverflow-x: hiddenを使用すると、水平スクロールのみを隠すことができます。

Answer 3

あなたはほぼそこにいます！ .exampleクラスのoverflowを設定

はのみはしかし、それの内部の溢れコンテンツを隠しています。

あなたはこれが動作するために、.exampleの親コンテナのoverflowを設定する必要があります - すなわち、それは内部にあるものは何でもコンテナ。

---

OPで言及したとおり、水平スクロールバーを非表示にしたいとします。このため

、あなたが

overflow-x: hidden 

しかし、（上述したように）設定する必要があり、これは.exampleの親コンテナの上にあることを確認してください。

body、または別のdivなどです。HTH。

例えば：

body, .parent-container { 
    overflow-x: hidden; 
}