CSSを超えてスクロールバーを表示する方法-CSSチュートリアル-php.cn

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

coldplay.xixi

リリース： 2021-04-16 17:25:36

オリジナル

2579 人が閲覧しました

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

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

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

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

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

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

 
     
        
            ......
        
     
 
.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 */ }

ログイン後にコピー