ホームページ  >  記事  >  ウェブフロントエンド  >  カスタム スクロール バー 3.0_JavaScript のヒント

カスタム スクロール バー 3.0_JavaScript のヒント

WBOY
WBOYオリジナル
2016-05-16 18:50:00903ブラウズ
  1. あらゆる形式の美化拡張機能 (画像のカスタマイズを含む)、クロスブラウザーのサポートをサポート
  2. マウスで上下の矢印ボタンを押したまま上下にスクロールできるようにします
  3. スクロールコンテンツ領域だけでなく、「スクロールバー領域」にマウスホイールを配置することによるスクロールをサポートします
  4. マウスでスクロール バーを押したまま (離さずに) スクロール領域の外に移動すると、ドラッグしてスクロールすることができます
  5. スクロールバーは、左側のスクロールコンテンツの高さと表示領域の高さに比例し、スクロールバーがある程度細い場合は、コンテンツの最小の高さの値が設定されます。小さすぎるため、スクロールバーが隠れています
  6. スクロール バーの上下の空白領域でのマウス クリックをサポートし、上下の位置決めスクロールを実現します (Windows のスクロール バーをシミュレート)
  7. キーボードの上下の矢印キーをサポートします。スクロール領域がスクロールされた後は、ページ本体がスクロールします。
  8. ページの更新後のスクロール バーのスクロール位置の保持をサポートします (ブラウザーのサポートまたは Cookie をオンにする必要があります)
  9. カスタム スクロール領域にマウスを置き、ホイールをスクロールします。スクロール領域がスクロールされたら、ページ本体がスクロールします。
  10. コードは以前のバージョンに基づいてリファクタリングされています。今回は、レンダリングされた div に「dumascroll」という名前のクラスを追加するだけで、このクラスがないものには影響しません。
  11. 以前のバージョンで見つかったバグを修正しました: 以前のバージョン
将来のバージョンでも引き続き機能を拡張できます:
1、
スペース バーの「下方向」高速スクロールのサポートを追加します (Windows スクロール バーのユーザー エクスペリエンスをより適切にシミュレートするため)
2、ページ本体のレンダリング サポートを追加します
3. テキストエリアのレンダリング サポートを追加します
4. ネストされた div のレンダリング サポートを追加します (コードがネストされた)、ネストされた div のスクロール高さアルゴリズムはこのバージョンで大幅に変更されます)
5. 同時水平スクロール バーのサポートを追加します (必要な場合は拡張できます)

デモ:
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。