CSS3でスクロールバーを非表示にする方法

css3 でスクロール バーを非表示にする方法は、スクロール バー [::-webkit-scrollbar] の疑似オブジェクト セレクターをカスタマイズすることです ([.element::-webkit-scrollbar { width:] など)。 0 !重要 } ]。

#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。

職場では、スクロール バーを非表示にしてスクロールをサポートする必要があるという状況に何度も遭遇します。では、このような状況に遭遇したとき、私たちは何をすべきでしょうか?おそらく多くの人の最初の反応は iscroll プラグインを使用することでしょうが、私はこの機能を実現するために CSS を使用することを好みます。以下、具体的な方法を見ていきましょう。

方法 1: スクロール バーの幅を計算して非表示にする

スクロール バーを配置して非表示にするだけです。

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

無料の学習ビデオ共有:

css ビデオ チュートリアル

以上がCSS3でスクロールバーを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。