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

142

ここにウェブサイトがあります。

デスクトップブラウザで見ると、黒いメニューバーが正しく以来、唯一のウィンドウの端まで伸びbodyていますoverflow-x:hidden。

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

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

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

サイトは1100pxまで拡大しますが、1100を超える空白があります。

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

css  overflow  viewport  mobile-browser 
— 先住民
ソース
1
これは特にiOS9の問題です
— Chuck Le Butt

回答:

269

内部サイトのラッパーのdivを作成<body>して適用overflow-x:hiddenするラッパーの代わりに、<body>または<html>問題を修正しました。

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

注：position: relativeラッパーdiv に追加する必要がある場合もあります。

— 先住民
ソース
44
私は設定に加えことが判明overflowしhidden、私は設定していたpositionにfixed...
— ビクターS
16
固定位置を追加すると、スクロールできなくなります！
— 2013年
5
私が試しました、すべてのコードをdiv内に配置してオーバーフロー-x：hiddenを指定しましたが機能しません。<meta name = "viewport" content = "width = device-width、initial-scale = 1">を追加しますあまりにも変更はありません：/アイデアはありますか？
4
overflow-x: hiddenこのメタタグを追加した後でも、@ leepowers はまだ機能しません。それが働いているあなたのウェブサイトへのリンクを共有していただけませんか？
— 木星
3
それposition:relativeがうまくいくのを見つけたとき、ちょっとギャング。
— Thomas Valadez
80

試す

html, body {
  overflow-x:hidden 
}

ただの代わりに

body {
  overflow-x:hidden 
}
— くも膜下
ソース
7
おかげで、しかし、のアプリケーションoverflowには何もhtmlおよび/またはbody任意の組み合わせでは問題は解決しませんでした。
— 先住民族2013年
うまくいきませんでした。回答する前に、私はあなたのサイトを使用して私の提案をあなたのCSSに適用する簡単なテストを行いました。少なくとも私のAndroidフォンの標準ブラウザとイルカブラウザの問題を修正しました。
— くも膜下
3
私のために働いた。eduardd.eu/projects/ezo（480から992pxのフッターは、女性とタオルのあふれている画像に問題がありました）
— エデュアルド
2
body {}とhtml {}を個別に指定しない場合、これが機能する理由を誰かが知っていますか？
— hamncheez 2017
1
height:100%;同様に追加する必要がある場合、それ以外の場合、画像の読み込み（ページの高さが高くなる）を含むページで垂直スクロールが正しく機能しません。
— アルノファンオールト
69

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

ビクターはposition:fixed作品を追加することに注意します。

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

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

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

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;
}
— ブラッド
ソース
2
とにかくモバイル部分を上にジャンプしないようにする方法はありますか？
— WraithKenny、2015年
1
私にとってうまくいったのは、オーバーフローによって非表示になっているはずの要素を、絶対位置から固定位置に変更することでした。ありがたいことに。
— Chuck Le Butt
1
@WraithKenny-ページでモバイルデバイスの先頭にジャンプしないようにする場合は、次のハックっぽい/醜いアプローチを使用できます。モーダル関数内では、何かを行う前に現在のスクロールオフセットを取得してください。モーダルスタイルを一緒に適用し、ボディの上マージンを現在のオフセットのマイナスに等しく設定してください。モーダルを削除するときは、マージンを0に設定し、ページを元のオフセットにスクロールしてください。
— Emil Borconi 2016年
2
このソリューションは、モーダルのコンテンツが画面に収まる場合にのみ機能します。つまり、モーダル自体をスクロールする必要はありません。
— トビアス
私のページにも他の固定および絶対配置要素があります。体のposition:fixed or absolute姿勢も乱す。私の場合、適切ではありません/動作しません:(
— sohaiby
31

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

html, body {
  position:relative;
  overflow-x:hidden;
}
— Waltur Buerk
ソース
1
動作するようです。しかし、これがなぜ機能するのか説明がありますか？
— LarS 2017
いいえ、最終的には機能しませんでした。私は最終的に計算を行い、divが許可されているよりも広くないことを確認しました。csscalc（）は、相対的な幅（vwまたは％）と絶対的な幅（px）の混合を可能にするため、ここで非常に役立ちました。
— LarS 2017
もちろん、これは回避策の一部です。まだどこかに溢れているものがあり、今は途絶えています。CSSルールを追加してみてください：* {アウトライン：1ピクセルの赤一色; それでもオーバーフローする要素が見つからない場合は、おそらくどこかにマージンがあることが原因です。* {margin：0！重要; オーバーフローがなくなるかどうかを確認します。
— Waltur Buerk 2018
私のために働く。隠された要素が体の幅を変えるのは興味深いことです。しかし、私にとっては、これはすべてのSafariブラウザに当てはまり、モバイルブラウザだけではありません。Bootstrap 4のtable-responsiveバグを修正する必要がありました。これが解決策でした。
— CunningFatalist 2018年
2
これが2019年にまだ問題であるとは信じられません。しかし、上記の解決策は完全に機能しました。どうも。
— staxim
28

@Indigenuityが述べているように、これは<meta name="viewport">タグを解析しているブラウザが原因であると思われます。

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

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

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

— Tempurturtul
ソース
initial-scale=1既存のビューポートメタタグに追加すると、実際に問題が解決します。ありがとう！
— JamesWilson 2017年
6
私にとってそれminimum-scale=1を修正したのはそれでした
— jpenna
これは、他のすべてを試した後、実際に私のために働いたものです。どうもありがとう ！
— 過酷なリメイ
16 
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;

iOS9で動作します

— オリオ
ソース
3
機能しますが、position：fixedを体に置くと、上にスクロールします
— ThaoD5
1
奇妙ですが、固定位置がなくてもうまくいきました。ここですべてのソリューションから1つだけ！
— Garavani
chromとboostrap + angularJSを使用して、私のために機能した1つだけ
— kiwicomb123 2017
6

ビューポートはそのままにしておきます。 <meta name="viewport" content="width=device-width, initial-scale=1.0">

：あなたが右側に連続する黒バーの効果を実現したいと仮定すると、#menubar超えてはならず、100％を、調整国境半径右側が乗されるように、それが右にもう少し伸びるようにパディングを調整。以下を変更してください#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％から低い値に調整します。適切なレイアウトを作成するためにコードに加えるべき多くの調整があります。私があなたが何をするつもりかはわかりませんが、上記のコードはオーバーフローバーをなんとか修正します。

— アン
ソース
使用するbox-sizing: border-box;場合は、100％幅のdivにパディングを追加できます。
— Charles John Thompson III
6

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

これposition: relativeはラッパーにも追加した後、私にとってはうまくいきました。

— アイザックF
ソース
これでうまくいきました。副作用は、スクロールバーが1つではなく2つあることです。解決策はのoverflow: hidden代わりにそれを作ることでしたoverflow-x: hidden。モバイルSafari、Chrome、OSX上のWin、およびWinで動作します。
— ポップ
4

<div>コンテンツ全体にラッパーを追加すると、実際に機能します。意味的には「気難しい」のですが、overflowWrapのクラスを持つdivをbodyタグ内に直接追加し、次のようにCSSを設定しました。

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

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

— MBurnette
ソース
4

Androidデバイスでも同じ問題が発生しましたが、iOSデバイスでは発生しませんでした。絶対配置された要素の外側のdivでposition：relativeを指定することで解決するように管理されています（外側のdivにはオーバーフロー：非表示）。

— Kwok Pan Fung
ソース
4

以前の単一のソリューションではうまくいかなかったので、それらを混ぜる必要があり、古いデバイス（iPhone 3）でも問題を修正しました。

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

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

次に、overflow-xが機能しなかったため、ラッパーに非表示のオーバーフローを適用する必要がありました。

  #wrapper {
    overflow: hidden;
  }

これで問題が解決しました。

— スパゲッティコード
ソース
これは@Indigenuityの回答とどう違うのですか？
— Ian Kemp
3
@ian Kempオーバーフロー：隠し！=オーバーフロー-x：隠し
— spaghetticode
3

この問題は、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

subarachnidが言ったように、overflow-xはbodyとhtmlの両方で非表示になりました。

**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;
}

リンク

— スカイリンR
ソース
1

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

#all-wrapper {
  overflow: hidden;
}

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

— ハイフェロー
ソース
1

私はこのトピックの返信から多くの方法を試しましたが、ほとんどは機能body,htmlしますが、ユーザーがモバイルで下にスクロールすると、overflow-xを使用するとページが遅くなる/フリーズするような副作用が発生します。

position: fixed本体内のラッパー/ divでの使用も良いですが、メニューがあり、JavaScriptを使用してアニメーションスクロールをいくつかのセクションに移動すると、機能しません。

そこで、touch-action: pan-y pinch-zoom本体のラッパー/ divで使うことにしました。問題が解決しました。

— じらゆL
ソース
0

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

.modal {
    -webkit-overflow-scrolling: auto!important;
}
— トビアス
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.