170

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

. _ body_overflow-x:hidden

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

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

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

サイトは 1100px まで拡大されますが、1100 を超える余白がまだあります。

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

4

19 に答える 19

332

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

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

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

于 2013-01-11T03:10:49.937 に答える
99

試す

html, body {
  overflow-x:hidden 
}

ただの代わりに

body {
  overflow-x:hidden 
}
于 2013-01-11T02:41:51.850 に答える
76

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

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

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

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

ビューポート (にビューポートを追加するための私のプラグイン<body>)がわかっている場合は、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;
}
于 2014-07-13T21:09:00.087 に答える
39

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

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

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

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

于 2016-04-18T11:52:14.603 に答える
16 
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;

iOS9で動作

于 2015-09-21T15:02:09.830 に答える
6

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

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

于 2013-01-11T04:43:50.973 に答える
4

<div>コンテンツ全体にラッパーを追加すると、実際に機能します。セマンティックに「厄介」ですが、bodyタグ内にオーバーフローラップのクラスを持つdivを追加し、CSSを次のように設定しました。

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

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

于 2013-03-23T03:46:53.663 に答える
4

以前の単一の解決策は私にとってはうまくいきませんでした。それらを組み合わせて、古いデバイス（iphone 3）でも問題を修正する必要がありました。

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

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

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

  #wrapper {
    overflow: hidden;
  }

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

于 2015-10-16T09:17:16.607 に答える
4

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

于 2015-07-23T16:26:36.273 に答える
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

于 2015-12-16T14:45:39.767 に答える
3

くも膜下が言ったように、本体とhtmlの両方でoverflow-x hiddenが機能しましたここに実際の例があります

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

リンク

于 2016-06-09T12:08:21.917 に答える
0

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

.modal {
    -webkit-overflow-scrolling: auto!important;
}
于 2016-08-12T06:28:26.020 に答える
0

以下の作品

body,
.innerbodywrapper{
overflow-x: hidden;
position: fixed;
width: 100%;
height: 100vh;
}
于 2022-01-17T10:46:19.710 に答える