ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3でスクロールバーを非表示にする方法
#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。 職場では、スクロール バーを非表示にしてスクロールをサポートする必要があるという状況に何度も遭遇します。では、このような状況に遭遇したとき、私たちは何をすべきでしょうか?おそらく多くの人の最初の反応は iscroll プラグインを使用することでしょうが、私はこの機能を実現するために CSS を使用することを好みます。以下、具体的な方法を見ていきましょう。 方法 1: スクロール バーの幅を計算して非表示にするスクロール バーを配置して非表示にするだけです。css3 でスクロール バーを非表示にする方法は、スクロール バー [::-webkit-scrollbar] の疑似オブジェクト セレクターをカスタマイズすることです ([.element::-webkit-scrollbar { width:] など)。 0 !重要 } ]。
<div class="outer-container"> <div class="inner-container"> ...... </div> </div>
.outer-container{ width: 360px; height: 200px; position: relative; overflow: hidden; }.inner-container{ position: absolute; left: 0; top: 0; right: -17px; bottom: 0; overflow-x: hidden; overflow-y: scroll; }このコードは、スクロール バーの幅とまったく同じ 17 ピクセルを右に巧みに移動します。この値は手動デバッグによって取得されました。 Chrome、IEでは問題ありませんでした。 方法 2: 3 つのコンテナーに囲まれ、スクロール バーの幅を計算する必要はありませんこのコードは、Microsoft ブログで初めて確認されました。これは、上記のアイデアと似ていますが、次の点が異なります。家に別の箱が追加され、中身がその箱に限定されました。こうすることで、スクロール バーが表示されなくなりますが、スクロールすることはできます。コードは次のとおりです。
<div class="outer-container"> <div class="inner-container"> <div class="content"> ...... </div> </div> </div>
.element, .outer-container { width: 200px; height: 200px; } .outer-container { border: 5px solid purple; position: relative; overflow: hidden; }.inner-container { position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll; }.inner-container::-webkit-scrollbar { display: none; }方法 3: CSS 非表示スクロール バーカスタム スクロール バー::-webkit-scrollbar の疑似オブジェクト セレクター。
.element::-webkit-scrollbar { width: 0 !important }IE 10
.element { -ms-overflow-style: none; }Firefox
.element { overflow: -moz-scrollbars-none; }無料の学習ビデオ共有:
以上がCSS3でスクロールバーを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。