iOSデバイス(およびおそらくAndroidデバイス)のスクロール動作は異なります。scroll
イベントは、スクロール全体が完了した後に1回だけ発生します。
ブラウザがこのように動作するかどうかを検出するにはどうすればよいですか?
使用することもできますが、スクロールの動作については何も教えてくれません。クロワッサンが好きかどうかを理解するために、誰かがフランス人かどうかを尋ねるようなものですよねwindow.Touch
?Modernizr.touch
:)
iOSデバイス(およびおそらくAndroidデバイス)のスクロール動作は異なります。scroll
イベントは、スクロール全体が完了した後に1回だけ発生します。
ブラウザがこのように動作するかどうかを検出するにはどうすればよいですか?
使用することもできますが、スクロールの動作については何も教えてくれません。クロワッサンが好きかどうかを理解するために、誰かがフランス人かどうかを尋ねるようなものですよねwindow.Touch
?Modernizr.touch
:)
タッチとマウスの両方の動作をサポートするデバイス (Windows 8 タブレットなど)、タッチのみをサポートするデバイス (電話)、マウスのみをサポートするデバイス (デスクトップ) があるため、検出については正しいと思います。そのため、一部のデバイスには両方の動作がある可能性があるため、デバイスには 1 つの動作しかないと断定的に言うことはできないと思います。
あなたが実際にやろうとしていることは、すべてのスクロール イベントにすぐに応答する必要があるかどうか、またはスクロール先がどこに到達するかを確認するために短い遅延を使用する必要があるかどうかを判断することであると仮定すると、機能するハイブリッド効果をコーディングできます。まあどちらにしても。
var lastScroll = new Date();
var scrollTimer;
window.onscroll = function(e) {
function doScroll(e) {
// your scroll logic here
}
// clear any pending timer
if (scrollTimer) {
clearTimeout(scrollTimer);
scrollTimer = null;
}
var now = new Date();
// see if we are getting repeated scroll events
if (now - lastScroll < 500){
scrollTimer = setTimeout(function() {
scrollTimer = null;
doScroll(e);
}, 1000);
} else {
// last scroll event was awhile ago, so process the first one we get
doScroll(e);
}
lastScroll = now;
};
doScroll()
スクロール処理ロジックになります。
これにより、ハイブリッド アプローチが可能になります。最近スクロール イベントが発生していない場合は、最初に到着したスクロール イベントで常に発生します。一連のスクロール イベントがある場合は、最初のイベントで発生し、1 秒間停止するまで待機します。
微調整したい数値が 2 つあります。1 つ目は、スクロール イベントが同じユーザー アクションから急速に発生したと見なすために、スクロール イベントがどの程度接近していなければならないかを決定します (現在は 500 ミリ秒に設定されています)。2 番目の値は、現在のスクロール位置を処理するまで待機する時間を決定し、ユーザーがスクロールバーの移動を停止したと見なします (現在は 1 秒に設定されています)。