カスタムスクロールバーであなたのものを驚かせます

本当に魅力的な巻物団との私の最初の出会いは、このまさにそのウェブサイトにありました。信じられないほど大胆で視覚的に印象的なスクロールバーを特徴とするCSS-Tricks V17の発売は、永続的な印象を残しました。

驚いた。そのようなデザイン要素、つまりスクロールバー！ - はプロのサイトにとても影響を与えることができますか？微妙な勾配、寛大な曲線、シームレスにブレンドされた背景、そして満足のいく厚さが大胆で革新的なデザインの選択でした。 Scrollbarの触覚は否定できませんでした。それは単に視覚的な重みを評価するために相互作用を招待しました。それは大胆で、前衛的で、楽しくアクセスしやすく、古いブラウザーで優雅に劣化していました。

現在のCSSトリックScrollbarはより洗練され、控えめですが、ブラックにミュートされた明るい灰色ですが、ブランドアイデンティティを維持し、グラデーション効果を微妙に紹介しています。ただし、気が散ることが少なく、読書体験を妨げないようにします。 MVPと80/20ルールの優先順位付けである効率駆動型の世界では、カスタムスクロールバーは真の職人技を表しています。彼らは、言葉が単に伝えることができない細部に注意のレベルを伝えます。

標準化の取り組み（より多くの進行中の）により、APIが簡素化されました。7つの擬似要素と11の擬似クラスが、ほぼあらゆる側面とScrollbarの状態を対象としています。これは広範囲に聞こえますが、3つしかマスターしていません。印象的なカスタマイズには十分です。

 <code>body::-webkit-scrollbar { /* required - the "base" of the bar - mostly for setting width */ } body::-webkit-scrollbar-track { /* the "track" of the bar - ideal for customizing "background" colors */ } body::-webkit-scrollbar-thumb { /* the draggable element—the star of the show! */ }</code>

これらは他の選択された要素と同様に機能し、多様なCSS技術を適用できます。メディアクエリ、バックグラウンドグラデーション、透明性、およびマージン（さまざまなCSSユニットを使用）はすべて効果的に機能します。 （ただし、すべてが可能であるわけではありません。スコルバーのカーソルをスタイリングして、真のレトロな感触を築きたいと思います）。 Lea VerouのCSSバックグラウンドグラデーションを実験すると、かなり型破りな、パーソナライズされたスクロールバーデザインがありました。それは間違いなくユニークで、私がより微妙なバージョンを実装した後、私の職場で「Swyxbar」を獲得しました。

すべてのフロントエンド開発者は、Scrollbarのカスタマイズの境界を少なくとも1回プッシュする必要があります。ただし、特に広く使用されている製品（Google Waveが実証したように）で、ユーザーの期待に反するスクロールバーの作成を避けることが重要です。

以上がカスタムスクロールバーであなたのものを驚かせますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。