Progressメーター付きのCSSスクロールバー

スクロールバー自体は、自然な進行状況の指標です。スクロールバーの位置は、スクロール要素のスクロールの進行状況（通常はページ全体）を直接反映しています。しかし、それは「充填可能な」進行状況バーというよりも進行状況の指標のようなものです。

いくつかのCSSテクニックを使用して、スクロール時にスクロールバーを「塗りつぶす」ことができます。

ただし、これは、 -webkit-プレフィックスを使用したScrollbarスタイルのプロパティにのみ適用されます。言い換えれば、これらの属性は非標準です。標準化されたスクロールバースタイルのプロパティは、この効果を達成することはできませんが、長期的にはより安全な場合がありますが、 scrollbar-widthとscrollbar-colorです。それでも、ベンダーのプレフィックスを備えたバージョンは消えない場合があるため、これが奇妙な形の進歩的な強化であると思うなら、それも大丈夫かもしれません。

スキルは何ですか？

基本的に、Scrollbarスライダーの上部（または水平スクロール要素の側面）の上部に巨大なbox-shadowを追加することで行われます。

 ：根 {
   - シャドウ：＃43A047;
  -SCROLLBARBG：#eee;
  -thumbbg：＃66bb6a;
}
:: -webkit-scrollbar {
  幅：16px;
}
:: -webkit-scrollbar-track {
  背景：var（ -  scrollbarbg）;
}
:: -webkit-scrollbar-thumb {
  背景色：var（ -  thumbbg）;
  Box-Shadow：0 -100VH 0 100VH var（ - 影）、0 0 15px 5pxブラック;
}

デモ

これを初めて見たのは、Mykのペンに入っていました。

その例は、Scrollbarのスライダー部分をまったく区別していないため、進行状況バーのようになりますが、使用が難しくなります。私のデモでは、わずかに異なるカラースライダーを使用しています。

本当にこれを使用できますか？

できない！その非常に奇妙で非標準以外は別として。 Safariブラウザがクラッシュし、修正方法がわかりません。

ただし、非常に関連性の高いCSSトリックがあります。

Scrollbarスタイルについてもっと知りたいです

わかりました、こちらをご覧ください。

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