web-dev-qa-db-ja.com

Overflow-x：hiddenは、モバイルブラウザーでのコンテンツのオーバーフローを防止しません

私はウェブサイトを持っています こちら 。

bodyにはoverflow-x:hiddenがあるため、デスクトップブラウザーで表示すると、黒いメニューバーはウィンドウのエッジにのみ適切に拡張されます。

AndroidまたはiOSを問わず、モバイルブラウザでは、黒いメニューバーに全幅が表示され、ページの右側に空白が表示されます。私が知る限り、この空白はhtmlまたはbodyタグの一部でもありません。

<head>でビューポートを特定の幅に設定しても：

<meta name="viewport" content="width=1100, initial-scale=1">

サイトは1100pxに拡張されますが、1100を超える空白はまだあります。

私は何が欠けていますか？ビューポートを1100に保ち、オーバーフローを遮断するにはどうすればよいですか？

cssoverflowviewportmobile-browser
115
Indigenuity

body内にサイトラッパーdivを作成し、bodyまたはhtmlのラッパーINSTEADにoverflow-x:hiddenを適用すると、問題が修正されました。

<meta name="viewport">タグを解析するブラウザは、overflowおよびhtmlタグのbody属性を単に無視するようです。

222
Indigenuity

試してみる

html, body {
  overflow-x:hidden 
}

ただの代わりに

body {
  overflow-x:hidden 
}
68
subarachnid

VictorS に対する 受け入れられた回答 のコメントは、実際に機能する非常にエレガントなソリューションであるため、独自の回答に値します。そして、その有用性に少し加えます。

ビクターは、position:fixedの追加が機能することに注意しています。

body.modal-open {
    overflow: hidden;
    position: fixed;
}

そして確かにそうです。ただし、本質的に上部にスクロールするというわずかな副作用もあります。 position:absoluteはこれを解決しますが、モバイルでスクロールする機能を再導入します。

ビューポートを知っている場合（ <body>にビューポートを追加するためのプラグイン ）、positionにCSSトグルを追加するだけです。

body.modal-open {
    // block scroll for mobile;
    // causes underlying page to jump to top;
    // prevents scrolling on all screens
    overflow: hidden;
    position: fixed;
}
body.viewport-lg {
    // block scroll for desktop;
    // will not jump to top;
    // will not prevent scroll on mobile
    position: absolute; 
}

また、モーダルを表示/非表示するときに、基になるページが左/右にジャンプするのを防ぐためにこれを追加します。

body {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}
67
Brad

これは、Safariでの水平スクロールを解決する最も簡単なソリューションです。

html, body {
  position:relative;
  overflow-x:hidden;
}
25
Waltur Buerk
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;

iOS9で動作します

16
ollio

@Indigenuityが述べているように、これはブラウザが<meta name="viewport">タグを解析することによって引き起こされるようです。

ソースでこの問題を解決するには、次を試してください。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">。

私のテストでは、これにより、ユーザーがズームアウトしてオーバーフローしたコンテンツを表示できなくなり、その結果、コンテンツのパン/スクロールもできなくなります。

15
Tempurturtul

以前の単一のソリューションではうまくいきませんでした。それらを組み合わせて、古いデバイス（iphone 3）でも問題を修正する必要がありました。

まず、htmlコンテンツを外側のdivにラップする必要がありました。

<html>
  <body>
    <div id="wrapper">... old html goes here ...</div>
  </body>
</html>

次に、overflow-xが機能していなかったため、ラッパーに隠されたオーバーフローを適用する必要がありました。

  #wrapper {
    overflow: hidden;
  }

これにより問題が修正されました。

5
spaghetticode

ボディ内にサイトラッパーdivを作成し、overflow-> x：hiddenをボディまたはhtmlのラッパーINSTEADに適用すると、問題が修正されました。

position: relativeをラッパーに追加した後、これはうまくいきました。

5
Isaac F

ビューポートに手を加えないでください：<meta name="viewport" content="width=device-width, initial-scale=1.0">

連続した黒いバーの効果を右側に達成したいと仮定すると：#menubarは100％を超えてはならず、右側がborder radiusになるように調整します四角くして、パディングが少し右に伸びるように調整します。以下を#menubarに変更します。

border-radius: 30px 0px 0px 30px;
width: 100%; /*setting to 100% would leave a little space to the right */
padding: 0px 0px 0px 10px; /*fills the little gap*/

もちろん、paddingを10pxに調整すると、左側のメニューがバーの端に残り、残りの40pxをそれぞれのli、20pxのそれぞれの左側に配置し、右：

.menuitem {
display: block;
padding: 0px 20px;
}

ブラウザのサイズを小さくすると、まだ白い背景が見つかります。代わりに、divからbodyに背景テクスチャを配置します。または、メディアクエリを使用して、ナビゲーションメニューの幅を100％から低い値に調整します。適切なレイアウトを作成するためにコードに多くの調整を行う必要があります。何をするつもりなのかわかりませんが、上記のコードはオーバーフローするバーを何らかの形で修正します。

4
Anne

Androidデバイスでも同じ問題が発生しましたが、iOSデバイスでは発生しませんでした。絶対に配置された要素の外側のdivでposition：relativeを指定することで解決できました（外側のdivにはoverflow：hiddenを使用）

4
Kwok Pan Fung

コンテンツ全体にラッパー<div>を追加すると、実際に機能します。意味的に「厄介な」間、私はbodyタグ内にoverflowWrapのクラスを持つdivを追加し、CSSを次のように設定します。

html, body, .overflowWrap {
overflow-x: hidden;
}

今はやり過ぎかもしれませんが、魅力のように機能します！

4
MBurnette

Subarachnidが言ったように、bodyとhtmlの両方でoverflow-xが非表示になった

**HTML**
<div class="contener">
  <div class="menu">
  das
  </div>
  <div class="hover">
    <div class="img1">
    First Strip
    </div>
     <div class="img2">
    Second Strip
    </div>
</div>
</div>
<div class="baner">
dsa
</div>

**CSS**
body, html{
  overflow-x:hidden;
}
body{
  margin:0;
}
.contener{
  width:100vw;
}
.baner{
   background-image: url("http://p3cdn4static.sharpschool.com/UserFiles/Servers/Server_3500628/Image/abstract-art-mother-earth-1.jpg");
   width:100vw;
   height:400px;
   margin-left:0;
   left:0;
}
.contener{
  height:100px;
}
.menu{
  display:flex;
  background-color:teal;
  height:100%;
  justify-content:flex-end;
  align:content:bottom;
}
.img1{
  width:150px;
  height:25px;
  transform:rotate(45deg);
  background-color:red;
  position:absolute;
  top:40px;
  right:-50px;
  line-height:25px;
  padding:0 20px;
  cursor:pointer;
  color:white;
  text-align:center;
  transition:all 0.4s;
}
.img2{
  width:190px;
  text-align:center;
  transform:rotate(45deg);
  background-color:#333;
  position:absolute;
  height:25px;
  line-height:25px;
  top:55px;
  right:-50px;
  padding:0 20px;
  cursor:pointer;
  color:white;
  transition:all 0.4s;
}
.hover{
  overflow:hidden;
}
.hover:hover .img1{
  background-color:#333;
  transition:all 0.4s;
}
.hover:hover .img2{
  background-color:blue;
  transition:all 0.4s;
}

リンク

3
Skylin R

Overflow-x：hiddenを使用して問題を解決しました。次のように

@media screen and (max-width: 441px){

#end_screen { (NOte:-the end_screen is the wrapper div for all other div's inside it.)
  overflow-x: hidden;
   }
 }

構造は次のとおりです

1st div end_screen >> inside it >> end_screen_2(div) >> inside it >> end_screen_2.

'end_screen is the wrapper of end_screen_1 and end_screen_2 div's

3
vikas etagi

私はこのページと他のページのさまざまな組み合わせを試しながら、これに数時間取り組んでいます。最終的に私のために働いたのは、受け入れられた答えで示唆されているように、サイトラッパーdivを作成することでしたが、両方のオーバーフローをxオーバーフローではなく非表示に設定しました。スクロール時にオーバーフローyのままにしておくと、数ピクセルだけ垂直にスクロールしてから停止するページになります。

#all-wrapper {
  overflow: hidden;
}

Bodyまたはhtml要素に何も設定せずに、これで十分でした。

1
highfellow

ブートストラップモーダル（フォームを含む）でこの問題を修正する唯一の方法は、次のコードをCSSに追加することでした。

.modal {
    -webkit-overflow-scrolling: auto!important;
}
0
Tobias