ホバー上のスクロールバー

Webスクロールバーの設計では、ユーザーエクスペリエンスとアクセシビリティの両方を考慮に入れる必要があります。一般的に、エリアをスクロールする必要がある場合は、スクロールバーを表示する必要があります。ただし、オンラインの世界は絶えず変化しており、いくつかの巧妙なテクニックはユーザーエクスペリエンスを向上させることができます。この記事では、デフォルトでスクロールバーを隠し、マウスがホバリングされたときにのみ表示する方法を紹介します。

この方法はThomas Gladdinesによって提案され、私のテストでは、Chrome、Firefox、およびSafariブラウザーで正常に機能しました。

コアの原則は、マスクレイヤーを使用してスクロールバーをカバーすることです。 Scrollbarとまったく同じ幅のマスク層を作成することにより（ここでは幅が17pxであると仮定すると、実際の幅をスクリプトで計算する必要がある場合があります）。マスク層の位置決めのアニメーションを遷移して、徐々に出現する効果をシミュレートすることもできます。これは非常に賢いです。

これは、偽のスクロールバーではなく、要素のネイティブスクロールバーを指すことは注目に値します。鍛造スクロールバーも実行可能なソリューションです。 Ben NadelはかつてSlackの実装方法を紹介しました。 Slackの方法は、Scrollbarをoverflowプロパティに隠された領域に強制的にレンダリングし、仮想スクロールバーを作成してネイティブスクロールバーをシミュレートすることです。これは、Scrollbarにレンダリングを強制するのとは異なるアプローチです。さらに、このアプローチでは、Scrollbarの幅を正確に指定するなど、いくつかの利点があるかもしれないScrollbarのスタイリングを妨げません。

1. この執筆時点で、MacOSの指示は次のとおりです。「デバイスがジェスチャーアクションをサポートする場合、スクロールを開始する前にスクロールバーが隠されます。そうしないと、それらは表示されます。」

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