CSSでスクロールバーを削除する方法

css スクロール バーの削除: 1. スクロール バーの幅を計算し、配置によってスクロール バーの位置を設定し、スクロール バーを非表示にします。 2. 「::-webkit-scrollbar」セレクターまたは「overflow」属性を使用して、スクロール バーを削除します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

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

デモ アドレス: http://caibaojian.com/demo/2018/3/scroll2.html

このコード賢いのは 17 ピクセル右に移動しました。これはスクロール バーの幅とまったく同じです。この値は手動デバッグによって取得されました。 Chrome、IEでは問題ありませんでした。

スクロール バーを削除する Css メソッド 2: ::-webkit-scrollbar selector または overflows 属性を使用します

同時に、この記事ではメソッド スクロール バーを非表示にする CSS メソッドですが、このメソッドは IE と互換性がなく、モバイル デバイスで使用できます。それがカスタム スクロール バー::-webkit-scrollbar の疑似オブジェクト セレクターです。詳細については、前の記事を参照してください: CSS3 カスタム Webkit スクロール バー スタイル Chrome と Safari

.element::-webkit-scrollbar { width: 0 !important }

IE 10

.element { -ms-overflow-style: none; }

Firefox

.element { overflow: -moz-scrollbars-none; }

デモ アドレス: http://caibaojian.com/demo/2018/3/scroll4.html

(学習ビデオの共有: css ビデオ チュートリアル )

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