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

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

将来のバージョンでも引き続き機能を拡張できます:
1、 スペース バーの「下方向」高速スクロールのサポートを追加します (Windows スクロール バーのユーザー エクスペリエンスをより適切にシミュレートするため)
2、ページ本体のレンダリング サポートを追加します
3. テキストエリアのレンダリング サポートを追加します
4. ネストされた div のレンダリング サポートを追加します (コードがネストされた)、ネストされた div のスクロール高さアルゴリズムはこのバージョンで大幅に変更されます)
5. 同時水平スクロール バーのサポートを追加します (必要な場合は拡張できます)

デモ:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title> <style type="text/css"> * {</style>