9

body 要素と scrollable 要素の両方で、overflow-x 値を hidden に設定していますが、モバイル Safari はこれらの値を無視します。デスクトップでは、オーバーフロー値は正常に機能します。

関連コード:

body { overflow-x:hidden; width:320px; height:100%; min-height:100%; margin:0; background:-webkit-linear-gradient(top,#e8e4dc,#f2f0eb); }

.page_list, .content { max-height:370px; box-sizing:border-box; padding:0; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch }

#catalog_page { border-left:1px solid #CCC; z-index:28; position:absolute; top:0; width:200px; height:460px; background:white; -webkit-transition:-webkit-transform 0.1s ease-in;; -webkit-transform:translate3d(0,0,0); display:none; }

catalog_page はビューポートの外側にあり、誰かがジェスチャーを行った後にのみスライドして表示されます。

再現するには：

1) iPhone (iPad ではありません) でwww.tekiki.comにアクセスします。右にスクロールすると、本体の幅は固定されていますが、catalog_page によってサイトの幅が拡張されていることがわかります。

4

10 に答える 10

14

html { overflow: hidden; }CSS に追加すると、修正されるはずです。

于 2013-07-20T22:40:46.770 に答える
4

iOS 7.1/8.2 の Mobile Safari でテスト済み 次のコードは、どちらも機能しませんでした。

html { オーバーフロー: 非表示; }

これは Mobile Safari のバグ/機能であり、OSX 上の Safari を含む他のブラウザはうまく機能すると思います。ただし、HTML 要素に position:fixed も設定すると、overflow:hidden は iPhone/iPad で機能します。このような：

html { オーバーフロー: 非表示; 位置: 固定; }

于 2015-03-28T16:57:07.520 に答える
2

html { オーバーフロー: 非表示; を追加します。} を CSS に追加すると、修正されるはずです。

この解決策は私にはうまくいきませんでした。

代わりに、ボディ内にラッパー div を作成し、overflow-x:hidden をラッパーに適用します。

CSS

#wrapper { 
    overflow-x: hidden;
}

html

<html>
...
<body>
<div id="wrapper">
...
</div>
</body>
</html>
于 2014-12-10T22:20:18.527 に答える
1

私の場合、以下は問題を解決しました

body, html {
  overflow-x: hidden;
}
于 2016-08-05T09:38:21.837 に答える
0

それは 2022 年です。モバイル サファリは、まだ風変わりな場合があります。しかし、overflow-x を body で動作させる方法は、次のようにすることです。

html,
body {
  height: 100%;
  overflow-x: hidden;
  transform: translate3d(0, 0, 0);
}

変換を理解できればよかったのですが、必要なようです。他の方法は、本体を相対的な位置に設定することでしたが、この方が安全なようです。

また

間違いなく安全で将来性のあるもう 1 つの方法は、ボディ内のすべてを div に直接配置し、その div に非表示のオーバーフローを与え、最小高さが 100vh であることを確認することです。そのようです：

<body>
  <div class="page">
    everything...
  </div>
</body>

次にCSSで：

.page {
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}
于 2022-02-07T22:50:59.913 に答える
0

html、bodyoverflow-x: hidden;が機能しない場合は、text-indent を探してみてください。たとえば、flexslider のデフォルト設定には、いくつかの要素が に設定されていtext-indent -9999pxます。これが html オーバーフロー ルールを上書きしていることがわかった。

于 2017-12-07T00:34:04.130 に答える