スライスの過程で、一部の DIV にローカルにスクロール バーを追加すると、非常に見苦しくなります。
せっかちなときは、通常、Jquery プラグインを使用してそれを実現します。つまり、ユーザー エクスペリエンスは、overflow:scroll を直接使用する場合ほど良くありません。
今日は、非常に使いやすい純粋な CSS スクロール バー スタイルをお勧めします。次のコードを CSS ファイルに追加するだけで、overflow:scroll をさまざまな位置で自由に使用できます。
ディスプレイ効果も非常に優れています。
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 7px; height: 7px; background-color: #ccc; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; background-color: #f5f5f5; } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); background-color: #c8c8c8; }
また、CSS を通じて色を直接定義することもできます。
以上が純粋な CSS スタイル: 非常に便利なスクロール バー スタイルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。