jQueryプラグインとしてのJavaScriptスクロールバーラッパー

この問題を解決するために設計された膨大な数のスクリプトにもかかわらず、ブラウザーのスクロールバーのスタイル設定の問題は依然として関連しています。 ブラウザのネイティブ動作に可能な限り近い様式化されたスクロールバーの実装を検討してください。



HTML / CSSを使用してスクロールバーをスタイリングするには、主に2つのアプローチがあり、それぞれに長所と短所があります。

• JavaScriptエミュレーションスクロール
• ネイティブスクロールのJavaScriptラッパー

JavaScriptエミュレーションスクロール

このアプローチの大きな利点は、完全にJavaScriptソリューションであることです。 このおかげで、このソリューションは開発が容易であり、最大限にクロスブラウザーです（ブラウザースクロールの特定の実装に関係なく、すべてのブラウザーでスクロールの動作が同じになるという意味で）。HTML構造と適用されたCSSスタイルへの影響は最小限です。 同様のアプローチは、jScrollPane、FleXcroll、Tiny Scrollbar、その他多くの企業で使用されています。



ただし、このアプローチの長所は、同時にその弱点でもあります。

• すべてのイベントをエミュレート/インターセプトすることが困難または不可能
• JavaScriptエミュレーションの実行はネイティブスクロールよりも遅い

ネイティブスクロールのJavaScriptラッパー

このアプローチは、本来の目的であるコンテンツのスクロールを続けながら、ネイティブスクロールがHTML / CSSによって隠されることです。 このような解決策は、いずれにしてもネイティブスクロールがエミュレートされたスクロールよりも優れているという理由で好ましいです。 多くはこのアプローチに基づいてプラグインを作成しようとしましたが、標準がないため、クロスブラウザの実装は非常に複雑であり、使用されるHTML構造とCSSスタイルに特定の制限を課します。 このため、多くの開発者は、垂直スクロールのみの実装を作成します。これは、すべてのブラウザーで予測どおりに動作します。



このアプローチの優れた実装の1つは、最近、記事「 システムのスクロールバーのクロスブラウザーカスタマイズ」で説明されています。

三輪車の発明

次のバイクを作成した理由の1つは、スクロールを様式化するスクリプトの検索で、20を超えるさまざまなプラグインが表示され、そのいずれも注文したプロジェクトに適していないという事実でした。 よく知られているプラ​​グインのほとんどは、ページ上で多数の初期化されたスクロールを伴う遅い操作のために適合しませんでした。 他の実装は、実装が不便だったり、ブラウザ間の互換性が不十分だったために適合しませんでした。



次の要件を満たす独自の実装を行うことが決定されました。

• スクロールの動作は、ネイティブにできるだけ近づける必要があります
• 垂直および水平スクロールバー
• 最小プロセッサ負荷
• HTML / CSSを使用した外観の完全なスタイリング
• HTML構造をスクロールバーに適用する機能、または既存の要素をスクロールバーとして使用するようプラグインに指示する機能
• スクリプトを再初期化することなく、コンテンツを変更するとき、またはコンテナ自体のサイズを変更するときにスクロールを自動的に変更する
• コンテナの幅と高さは、ピクセルとパーセントの両方で設定するか、CSS max-height / max-widthで制限できます
• スクロールは、コンテナの内部または外部のどこにでも配置できます
• スクロールバーのサイズ、またはCSSスタイルを介して設定された値の自動計算
• IE7 +、Firefox、Chrome、Opera、Safariをサポート
• 「すぐに使える」機能により、モバイルブラウザのスクロールが無効になります

アプローチとして、ネイティブスクロール上にJavaScriptラッパーの形式でプラグインを作成するソリューションが選択されました。 ネイティブスクロールの機能を終了し、CSSを使用してネイティブスクロールを非表示にし、定型化されたスクロールを表示します。 これにより、標準スクロールの動作をエミュレートする必要がなく、JavaScriptを使用して位置の変更のみをキャッチできるという利点があります。



それでも、スクロールの完全なエミュレーションを回避することはできませんでした-マウスが定型化されたスクロール上にあるときのスクロール動作をエミュレートする必要があります：マウススクロールをキャッチするには、ドラッグアンドドロップ、スクロール自体と矢印をクリックします。 もちろん、「Connected and Forgot」という理想的なソリューションは機能しませんでした。 しかし、設定された目標のほぼすべてが完全に達成されました。

デモンストレーション

ソースファイル

一般的なスクロールバーの機能の比較

ご注意

定型化されたスクロールバーを機能させるには、特定のHTML構造が必要であり、初期化時に元のJavaScriptコンテナーが別のコンテナーにラップされることに注意してください。 このため、いくつかの使用パターン、HTML構造、およびCSSスタイルがあります。

1. ソースコンテナにインラインスタイルを含めることはできません
2. コンテナにパディング/マージンを使用しないでください。 インデントが必要な場合は、内部に必要なインデントを持つ別のコンテナを追加することをお勧めします
3. コンテナの内容を変更するときは、クラスごとにコンテナにアクセスしないでください。 これらのクラスはラッパーコンテナによって使用されます

マイナーな欠陥には、マウスがコンテナの内容の上にある場合（ネイティブ動作）とマウスがスクロールバーの上にある場合（エミュレートされたスクロール）のマウスホイールでのスクロールの高さ/幅の違いが含まれます。 実装するのが非常に難しいいくつかのアイデアがあるので、私はそれらを「後で」残します。



また、WebKit ChromeおよびSafariブラウザーでテキストを選択するときに、コンテナーをスクロールする不快な効果を取り除くことはできません。 部分的には、外部スクロール（デモで利用可能）を使用するときにこれを行うことができました。

注釈

異なるブラウザーだけでなく、同じブラウザーの異なるバージョン（はい、そのブラウザー）でのスクロール動作の違いのため、同様の動作を計算するためにマージン/パディング/境界線/位置の多くの組み合わせを試す必要がありました。 ソリューションの検索中に、いくつかの興味深い機能がありました。

• IE8では、max-heightを使用するバグ：場合によっては、バージョン8 IEのレンダラーがクラッシュするか、コンテナの高さをmax-heightに等しくしようとします（公式バージョンリリースのバグ）
• WebKitブラウザー（Chrome、Safari）、テキストを選択するとき、内部コンテナーをスクロールして、非表示のスクロールバーを「公開」する
• コンテンツがコンテナのサイズを超える場合、右および下のパディングの表示はブラウザ自体の裁量にとどまります
• プラグインを検索するときに、標準のスクロールメカニズムが使用されているかどうかをすばやく確認するには、スクロール可能なコンテンツの上にあるマウススクロールをクリックします。

バージョン0.1.3（20130425）への更新：

• スクロールエミュレーションの改善：エミュレートされたスクロール上でマウスホイールを使用してスクロールする場合、自然なスクロールとほぼ同じように動作します。 また、スクロールバーの素材をクリックしてマウスをホールドしたときの動作も変更されました
• CSSの配置が修正され、Google Chrome / Safari WebKitブラウザーでテキストを選択するときにコンテナーが「余分に」シフトする

バージョン0.1.4（20130430）への更新：

• 水平スクロールバー上でマウスを使用して水平スクロールを追跡する
• コンテナのスクロール時にページのスクロールを無効にするdisableBodyScrollオプションを追加しました。 このオプションでは、ブラウザーのネイティブ動作を無効にし、JavaScriptを介してスクロールをエミュレートする必要がありました

バージョン0.1.6（20131018）への更新：

• モバイルデバイスでのスクロール初期化を無視するオプションを追加
• タッチデバイスでスクロールするためのドラッグサポートを追加

バージョン0.1.7（20140307）への更新：

• IEで1ピクセルのギャップがあるスクロールバーの外観を修正するためのハックを追加しました

バージョン0.1.8（20140308）への更新：

• コンテンツの高さがコンテナの高さより低い場合に水平スクロールバーを表示するバグを修正（高さ：100％の場合）

バージョン0.1.9（20140310）への更新：

• コンテンツに高さ100％の divが含まれる場合に垂直スクロールバーを表示するバグを修正しました。 オーバーフロー：非表示; 内側の外側のコンテナの高さを超える高さのdiv（ Evangeline Reiのフィードバックとコメントに感謝）
• コンテンツ/コンテナのサイズを変更するときにスクロールバーの自動再初期化を行うautoUpdateオプションを追加しました

バージョン0.2.0（20140312）への更新：

• スクロールバーのサイズを手動で再計算する機能のonUpdateオプションが追加されました。 このオプションのおかげで、スクロールバーがページマップとして追加されました
• スクロールバーのマウスボタンが押されている場所への段階的なスクロールを行うstepScrollingオプションを追加しました。 オプションが無効になっている場合、コンテンツはマウスの位置まで右にスクロールされます。そうでない場合は、マウスを保持している場所への加速による段階的なスクロールが行われます（スクロール動作のエミュレーション）
• CSSに完全に転送されたスクロールバーの非表示/表示
• onInitの動作が変更されました -初期化中に関数が1回だけ起動するようになりました

バージョン0.2.1（20140323）への更新：

• 水平スクロールが表示されるときに＃アンカー要素にスクロールするバグを修正

バージョン0.2.2（20140411）への更新：

• デフォルト設定でいくつかのスクロールバーを初期化するバグを修正
• 両方のスクロールバーが表示されている場合に便利なCSSコーナー設定のためにscroll-element_corner要素を追加しました

バージョン0.2.3（20140703）への更新：

• ブラウザでズームを変更するときに表示されるスクロールバーのバグを修正
• CSSを使用する場合のIEのスクロールバーサイズの初期化が正しくないバグを修正* {box-sizing：border-box; }
• コンテナのスクロールの程度を簡単に判断できるコールバック関数onScrollを追加しました
• スクロールバーは、優れたAngular.JSフレームワークのディレクティブとして使用できます
• プラグインをロードする前にjQueryScrollbarOptionsグローバル変数を介してデフォルト値をオーバーライドする機能を追加しました
• 最適化されたコンテナのサイズ変更チェック

バージョン0.2.4（20140715）への更新：

• TEXTAREAのスクロールバーを最終的に様式化する機能を追加しました