カスタムとブラウザネイティブのスクロールバー

Webアプリケーションに、カスタマイズ可能なJavaScriptベースのスクロールバー（および一般的なスクロール機能、つまりコントロールをマウスのスクロールホイールにバインドする）を含めると、魅力的です。

しかし、私が見つけたすべての解決策は個人によって開発されました（正式なサポートや将来のサポートの欠如と同じです）。さらに、それらを使用している主流のサイトを覚えていない。

私の特定のケースでは、非JavaScriptまたはIE6 / odd-browser環境はサポートされることを意図していません。

今日、カスタムスクロールバーは避けるべきですか？そうでない場合、選択できる最良のオプションは何ですか？

使いやすさに関して常に私に説得力がある非常に重要な議論の1つは、一貫性です。サイトのすべてのハンドルを同じ高貴な目標に見えるようにしたいかもしれませんが、誰かがあなたのアプリやサイトをどのように使用するかを考えてください。彼らは単にあなたのものを使用しているのではなく、負荷を使用しています。実際、6つの異なるWebサイトの8つのタブが現在開いています。任意のタブに切り替えても、スクロールバーは同じで、どこにいても同じに見えます。コンテンツをスクロールできる場所は常に知っています。

したがって、可能な限り、グラフィックデザイナーを怒らせない場合は、人々が知っていることに固執する必要があります。

独自のカスタムスクロールバーを追加した場合、ユーザーはそれを使用する前に、しばらくの間、心の中でそれを処理する必要があります。これは必ずしも良いことではありません。サイトには、ユーザーが見て理解できるコンテンツがすでにあります。他のすべてのものが期待どおりに表示されます。

常にナビゲートしやすいサイトにしてください。美は認知を要求（または活性化）すべきではない。

スクロールバーを置き換えるのは良い考えではないと思います。あなたがOSとブラウザに慣れているとき-スクロールはあなたの脳からの多くの入力を必要としません。うまく設計されたものを持っていることは素晴らしいですが、あなたはあなたの顧客を混乱させるでしょう。使用するこぶしの数回の煩わしさを相殺するのに十分な付加価値です。

私の考えは、カスタムスクロールバーを使用することは、美学の範囲内に留まる場合、つまりデフォルトのスクロールバーのスキンを変更するだけのように見える場合、悪い考えではないということです。ユーザーは、カスタムボタン、カスタムチェックボックスなど、Webページの他のカスタム部分をすぐに理解します。stackexchangeサイトの投票ボタンのクリック可能な属性を理解するのに問題がありますか？または、stackexchangeサイトまたはYahooメールで質問にタグを付けるためのカスタム入力テキストボックスとのやり取りに問題がありますか？スクロールバーは、レイアウトや、逆方向のスクロールや円形のスクロールバーの作成など、ブラウザの期待される機能を変更しない限り、エンドユーザーがすばやく認識できます。肌を変えるだけならいいですよ。

ただし、考慮すべきカスタムスクロールバーにはいくつかの問題があります。

1. 彼らは通常、クロスブラウザになるためにかなりの時間を必要とします
2. 上位互換性がない可能性があります。つまり、新しいバージョンのブラウザーをリリースすることにより、機能が停止する可能性があります。
3. スクロール動作を手動で実装する必要があります。このアイテムについては、HTMLボタンを検討してください。disabled='disabled'それらに属性を追加すると、ブラウザは単にクリックまたはそれらに対するもう入力を受け付けなくなります。ただし、<div>要素を使用してボタンの動作を模倣する場合は、無効な動作を独自に実装する必要があります。また、カスタムスクロールバーは、ブラウザによって既に実装されているスクロール機能を実装する必要があります。

私たちが言っていることにもかかわらず、カスタムスクロールバーの使用と実装を体験するために、（プロダクションではなく）趣味のプロジェクトを開始することをお勧めします。良い例については、このページを参照してください。

Jacob Nielsenはスクロールバーに関する素晴らしいエントリーを持っています。彼は、OSのスクロールバーを使用しないことを特に推奨し、水平スクロールに対して警告します。