jQuery は Mac Lion OS の模倣スクロール バーを作成します。

nanoScrollerJS は、Mac OS X Lion システムのスクロール バー効果を実現する簡単な方法を使用する jQuery プラグインです。このスクロールバー プラグインは、最小限の HTML 構造 .nano > を使用します。他のスクロール バー要素 .pane > .nano-slider は、プラグインの実行中に動的にロードされます。このスクロールバー プラグインは、ネイティブ スクロールバーを使用して、iPad、iPhone、および一部の Android タブレットで動作します。

使用方法

HTML 構造

スクロール バー プラグインが動作するために必要な HTML 構造は次のとおりです:

コードをコピーします コードは次のとおりです:

... ここにコンテンツ ...

nano および nano-content のクラス名は、プラグインのパラメーターを通じて変更できます (変更後は、プラグインの CSS ファイルもそれに応じて変更する必要があります)。

CSS スタイル

nanoscroller.css ファイルを HTML

に導入します。

コードをコピーします コードは次のとおりです:

<リンク rel="スタイルシート" href="nanoscroller.css">

コンテナの幅と高さを指定し、スクロールバーのいくつかの基本スタイルをカスタマイズする必要があります。例:

コードをコピーします コードは次のとおりです:

.nano { 背景: #bba; 幅: 500 ピクセル; }
.nano > .nano-content { パディング: 10px; .nano > .nano-pane {背景: #888; .nano > .nano-pane > .nano-slider { 背景: #111;


JAVASCRIPT

jquery.nanoscroller.js ファイルをページに導入します。

コードをコピーします コードは次のとおりです:

次に、次のメソッドを使用してスクロール バー プラグインを呼び出します。このメソッドは、HTML 内の .nano を含むすべての DOM 要素に適用されます。

コードをコピーします

コードは次のとおりです: $(".nano").nanoScroller();

高度な方法

一番上までスクロールします:

コードをコピー

コードは次のとおりです: $(".nano").nanoScroller({ スクロール: 'トップ' });

一番下までスクロールします:

コードをコピーします

コードは次のとおりです: $(".nano").nanoScroller({ スクロール: 'bottom' });

オフセットを指定して一番上までスクロールします:

コードをコピーします

コードは次のとおりです: $(".nano").nanoScroller({ スクロールトップ: 値 });

オフセット値を指定して一番下までスクロールします:

コードをコピー

コードは次のとおりです: $(".nano").nanoScroller({ スクロールボトム: 値 });

要素をスクロールします:

コードをコピーします

コードは次のとおりです: $(".nano").nanoScroller({scrollTo: $('#a_node') });

スクロールを停止します。このオプションは、スクロールバー プラグインのすべてのバインドされたイベントを無効にし、UI からスクロールバーを非表示にします。

コードをコピーします

コードは次のとおりです: $(".nano").nanoScroller({ stop: true });

破壊

nanoScroller スクロール バーを破棄し、スクロール バーをブラウザーのネイティブ スクロール バーにリセットします。

コードをコピーします コードは次のとおりです:

$(".nano").nanoScroller({ destroy: true });

スクロールバーを点滅に設定します。点滅時間はパラメータで設定します(デフォルトは1.5秒)。

コードをコピーします コードは次のとおりです:

$(".nano").nanoScroller({ flash: true });

nanoScroller();

スクロールバーを更新します。この操作では、スクロール バーの位置と高さが単純に再計算されます:

コードをコピーします コードは次のとおりです:

$(".nano").nanoScroller();

カスタムイベント

スクロールエンド

カスタムのscrollendイベントは、スクロールバーがコンテナの一番下までスクロールするたびにトリガーされます。 (スクロールバーがコンテナの一番下に達すると、ユーザーが再度スクロールしてもこのイベントはトリガーされません)

コードをコピーします コードは次のとおりです:

$(".nano").bind("スクロールエンド", function(e){
console.log("現在の HTMLDivElement", e.currentTarget);
});

一部のブラウザはこのイベントを同時に複数回トリガーするため、このイベントをバインドするには jQuery .bind または .on を使用する必要があります。 jquery-debounce プラグインを使用すると、ブラウザーにこのイベントを 100 ミリ秒ごとにトリガーさせることができます:

コードをコピーします コードは次のとおりです:

$(".nano").debounce("scrollend", function() {
alert("終わり");
}, 100);

スクロールトップ

scrollend イベントと同様に、ユーザーがコンテナの一番上までスクロールするたびにトリガーされます。

scrollend イベントは、scrolltop イベントと同じで、ユーザーがスクロールするたびに発生します。このイベントには、スクロール バーの現在の位置、最大高さ、方向 (上または下) の js オブジェクト パラメーターが付属します:

コードをコピーします コードは次のとおりです:

$(".nano").on("update", function(event, value){
console.debug(values);
});

設定パラメータ

このスクロール バー プラグインでは利用可能なパラメーターのセットがあります:

iOSNativeScrolling

iOS 5 でネイティブ スクロールバーを使用したい場合は、これを true に設定できます。ネイティブ スクロールバーは iOS 5 でより適切に機能します。

iOSNativeScrolling が true に設定されている場合、ネイティブ スクロール バーをサポートするためにデバイスによって .pane と .slider が生成/追加されないことに注意してください。

デフォルト値: false。

コードをコピーします コードは次のとおりです:

$(".nano").nanoScroller({ iOSNativeScrolling: true });

スライダー最小高さ

スクロール要素の最小の高さを設定します:

デフォルト値: 20。

コードをコピーします コードは次のとおりです:

$(".nano").nanoScroller({ sliderMinHeight: 40 })

スライダー最大高さ

スクロール要素の最大高さを設定します:

デフォルト値: null。

コードをコピーします コードは次のとおりです:

$(".nano").nanoScroller({ sliderMaxHeight: 200 });

PageScrolling を防止

コンテナのコンテンツが上または下にスクロールするときにページがスクロールしないようにするには、true に設定します。

デフォルト値: false。

コードをコピーします コードは次のとおりです:

$(".nano").nanoScroller({PreventPageScrolling: true });

サイズ変更を無効にする

nanoscroller のサイズが変更されないようにするには、true に設定します。このオプションを true に設定した場合は、忘れずにリセット メソッドを呼び出してください。そうしないと、奇妙な問題が発生します:

デフォルト値: false。

コードをコピーします コードは次のとおりです:

$(".nano").nanoScroller({ disableResize: true });

常に表示

スクロール バーが停止したときに自動非表示機能をオフにするには、true に設定します:

デフォルト値: false。

コードをコピーします コードは次のとおりです:

$(".nano").nanoScroller({ alwaysVisible: true });

フラッシュディレイ

フラッシュ オプションを有効にすると、このオプションはフラッシュ遅延を指定するために使用されます:

デフォルト値: 1500。

コードをコピーします コードは次のとおりです:

$(".nano").nanoScroller({ flashDelay: 1000 });

ペインクラス

スクロールバートラック要素のクラス名。これを変更する場合は、CSS ファイルに対応する変更を加える必要があります:

デフォルト: 'ナノペイン'。

コードをコピーします コードは次のとおりです:

$(".nano").nanoScroller({ sliderClass: 'scrollSlider' });

コンテンツクラス

スクロールバーコンテナdivのクラス名。これを変更する場合は、CSS ファイルに対応する変更を加える必要があります:

デフォルト: 'nano-content'。

コードをコピーします コードは次のとおりです:

$(".nano").nanoScroller({ contentClass: 'sliderContent' });

タブインデックス

スクロール可能なコンテンツの順序を設定します。-1 に設定すると、タブ キーを使用するとコンテンツがスキップされます。

デフォルト値: 0。

コードをコピーします コードは次のとおりです:

$(".nano").nanoScroller({ tabIndex: 0 });

ブラウザ互換

デスクトップ

IE7
Firefox 3
クロム
サファリ 4
オペラ 11.60
モバイルデバイス

iOS 5 (iPhone、iPad、iPod Touch)
iOS 4 (プラグインが付属)
Android Firefox
Android 2.2/2.3 ネイティブ ブラウザ (プラグインが付属)
Android Opera 11.6 (プラグインが付属)
プラグインを介してモバイル デバイスのブラウザで nanoScroller を実行することを改善します

overthrow.js を使用すると、nanoScroller をモバイル ブラウザーでより適切に動作させることができます。モバイル デバイス上の CSS オーバーフロー (overflow: auto;/overflow:scroll;) をシミュレートします。

overthrow を使用するには、ページに overthrow.js を導入します:

コードをコピーします コードは次のとおりです:

次に、スクロールバーのコンテンツ div に overthrow クラスを追加します。

コードをコピーします コードは次のとおりです:

ここにコンテンツ ...

上記は nanoscroller プラグインの使用方法についてです。気に入っていただければ幸いです。