モバイルオーバーフロー：AutoはScrollbarを非表示にします：理由とそれを解決する方法は何ですか？

モバイルCSSスクロールバーは問題：原因とソリューションを隠します

モバイル開発では、スクロールバーのディスプレイと非表示は、多くの場合頭痛です。この記事では、典型的なケースを分析します。 overflow: auto 。

問題の説明：

モバイルブラウザでは、ネストされたDiv構造が内側のDivセットoverflow: autoで設定され、スクロールが終了した後にスクロールバーが自動的に隠されると予想されます。ただし、実際の状況は次のとおりです。スクロールバーは通常、最初の巻物の後に隠されますが、2番目のスクロールの後には常に表示され、自動的に消えることができません。さらに困惑しているのは、外側のdivのborder-radius財産を削除した後、問題が消えるということです。

コード例：

<div id="f" style="background:red;height:300px;width:100%;overflow:hidden;border-radius: 10px;">
    <div id="b" style="background:red;height:100%;width:100%;overflow:auto">
      <div id="c" style="background:rgb(188, 193, 194);height:100%;width:300%;">
        <p>多くのテキストコンテンツ...</p>
      </div>
    </div>
  </div>

問題の分析と解決策：

問題の根本原因は、外側div（IDはf）のborder-radius属性とoverflow: auto属性（id is b）の対立にあります。 border-radius 、レンダリングの問題を引き起こし、巻物棒の隠されたメカニズムに影響を与えます。

より良い解決策：

外側のdivからborder-radiusを除去する代わりに、より良いアプローチは、 border-radius内部divに適用し（id is b）、 overflow: hiddenプロパティ（id is f）を削除することです。これは、外側のdivの丸い角効果を保持するだけでなく、スクロールバーの隠れの問題も解決します。

変更されたコードは次のとおりです。

<div id="f" style="background:red;height:300px;width:100%;border-radius: 10px;">
    <div id="b" style="background:red;height:100%;width:100%;overflow:auto; border-radius: 10px;">
      <div id="c" style="background:rgb(188, 193, 194);height:100%;width:300%;">
        <p>多くのテキストコンテンツ...</p>
      </div>
    </div>
  </div>

上記の調整により、モバイル側のスクロールバーは、スクロールが完了した後に正常に隠すことができます。

以上がモバイルオーバーフロー：AutoはScrollbarを非表示にします：理由とそれを解決する方法は何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。