CSSを超えてスクロールバーを表示する方法

スクロール バー表示を超えて CSS を使用する方法: 1. 3 つのコンテナーを使用してスクロール バーを囲みます。スクロール バーの幅を計算する必要はありません。2. カスタム スクロール バー [::webkit-scrollbar] の疑似オブジェクト セレクター。

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、DELL G3 コンピューター。

制限を超えてスクロール バーを表示する Css メソッド:

メソッド 1: 3 つのコンテナーで囲まれているため、スクロールの幅を計算する必要はありませんbar

この方法では、方法 1 と比較して、ボックスを追加し、そのボックス内にコンテンツを制限することで、スクロール バーが見えなくなり、同時にスクロールできるようになります。

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

方法 2: スクロール バーの擬似オブジェクト セレクターをカスタマイズする::webkit-scrollbar

この方法は IE と互換性がなく、モバイルで使用できます。アプリケーション。

1
.element::-webkit-scrollbar { width: 0 !important }
　　IE 10+
1
.element { -ms-overflow-style: none; }
　　Firefox
1
.element { overflow: -moz-scrollbars-none; }

詳細:

以下はカスタム Webkit スクロール バー スタイルです。

最新バージョンの Google Chrome ブラウザを使用すると、スクロール バー スタイルはすでに非常に美しいです。この Webkit スクロールバーは Webkit コアでのみ機能します。

webkit 属性

::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }

推奨される関連チュートリアル: CSS ビデオ チュートリアル

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