web-dev-qa-db-ja.com

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

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

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

私の特定のケースでは、JavaScriptやIE6/odd-browser環境はサポート対象ではありません。

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

8
vemv

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

ですから、可能な限り、そしてグラフィックデザイナーを怒らせない場合は、人々が知っていることに固執してください。

16
Pelshoff

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

常にサイトを作成しよう[〜#〜] easy [〜#〜]ナビゲートします。 美容は認知を要求(またはアクティブ化)するべきではありません

5
treecoder

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

3
Daniel Iankov

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

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

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

私たちが言っていることにもかかわらず、カスタムスクロールバーの使用と実装を体験するには、趣味のプロジェクト(本番環境ではない)を開始することをお勧めします。良い例は this ページをご覧ください。

2
Saeed Neamati

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

1
Malfist