スクロールイベントがブラウザによって行われたのか、ユーザーによって行われたのかを判断することはできますか？具体的には、戻るボタンを使用すると、ブラウザは最後の既知のスクロール位置にジャンプする場合があります。スクロールイベントにバインドした場合、これがユーザーによるものかブラウザによるものかをどのように判断できますか？
$(document).scroll( function(){
//who did this?!
});
ブラウザでスクロールを引き起こす3つのタイプの状況があります。
element.scrollTo(x,y)。回答:
残念ながら、それを直接伝える方法はありません。
このタイプのフローに依存しないようにアプリを再設計できる場合は、それを選択してください。
そうでない場合、私が考えることができる回避策は、ユーザーが開始したスクロールを追跡し、スクロールがブラウザーまたはユーザーによってトリガーされたかどうかを確認することです。
これは私がまとめた例で、これはかなりうまくいきます（jQueryの履歴に問題があるブラウザーを除く）。
完全にテストできるようにするには、これをローカルで実行する必要があります（jsFiddle / jsbinはコンテンツをiFrameするため、適切ではありません）。
検証したテストケースは次のとおりです。
userScrollですfalseuserScrollなりますtrueuserScrollなりますfalseuserScrollなりfalseます;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/tkyk/jquery-history-plugin/master/jquery.history.js"></script>
</head>
<body>
<span> hello there </span><br/>
<a href="#bottom"> click here to go down </a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="bottom"> just sitting </a>
</body>
<script type="text/javascript">
var userScroll = false;
function mouseEvent(e) {
userScroll = true;
}
$(function() {
// reset flag on back/forward
$.history.init(function(hash){
userScroll = false;
});
$(document).keydown(function(e) {
if(e.which == 33 // page up
|| e.which == 34 // page dn
|| e.which == 32 // spacebar
|| e.which == 38 // up
|| e.which == 40 // down
|| (e.ctrlKey && e.which == 36) // ctrl + home
|| (e.ctrlKey && e.which == 35) // ctrl + end
) {
userScroll = true;
}
});
// detect user scroll through mouse
// Mozilla/Webkit
if(window.addEventListener) {
document.addEventListener('DOMMouseScroll', mouseEvent, false);
}
//for IE/OPERA etc
document.onmousewheel = mouseEvent;
// to reset flag when named anchors are clicked
$('a[href*=#]').click(function() {
userScroll = false;
});
// detect browser/user scroll
$(document).scroll( function(){
console.log('Scroll initiated by ' + (userScroll == true ? "user" : "browser"));
});
});
</script>
</html>
ノート：
event.keyCodes OSによって異なる場合があるため、適切に変更する必要がある場合があります。お役に立てれば！
event.throwerプロパティがありませんか？！）。
私の知る限り、スクロールイベントが「ユーザー」または他の手段によって発行されたときはいつでも（何の作業もなしに）知ることは不可能です。
（他の人が述べたように）マウスホイールイベントをキャッチしてから、スクロールをトリガーできるキー（矢印、スペースなど）でキーダウンイベントをキャッチして、現在フォーカスされている要素を確認することができます。たとえば、を使用してスクロールすることはできません。入力フィールドに入力する際の矢印キー。一般に、これは複雑で面倒なスクリプトになります。
対処している状況に応じて、「ロジックを元に戻す」と推測できます。ユーザーが発行したスクロールイベントを検出する代わりに、プログラムで作成されたスクロールにフックして、コードで作成されていないスクロールイベントをユーザーが作成したものとして扱います。私が言ったように、それは状況とあなたが達成しようとしていることによって異なります。
すべてのユーザーイベントをキャッチしようとするよりも、反対のことを実行してプログラムイベントのみを処理し、それらを無視する方がはるかに簡単です。
たとえば、この種のコードは機能します。
// Element that needs to be scrolled
var myElement = document.getElementById('my-container');
// Flag to tell if the change was programmatic or by the user
var ignoreNextScrollEvent = false;
function setScrollTop(scrollTop) {
ignoreNextScrollEvent = true;
myElement.scrollTop = scrollTop
}
myElement.addEventListener('scroll', function() {
if (ignoreNextScrollEvent) {
// Ignore this event because it was done programmatically
ignoreNextScrollEvent = false;
return;
}
// Process user-initiated event here
});
次に、を呼び出すsetScrollTop()と、スクロールイベントは無視されますが、ユーザーがマウス、キーボード、またはその他の方法でスクロールすると、イベントが処理されます。
はい、100％可能です。私は現在、IEが要件ではないアプリケーション（クライアント向けのみ）でこれを使用しています。バックボーンアプリがスクロールが変更されるアニメーションを開始すると、スクロールは発生しますが、これらのイベントキャプチャはトリガーされません。これは、最新のFF、Safari、Chromeでテストされています。
$('html, body').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(evt) {
// detect only user initiated, not by an .animate though
if (evt.type === 'DOMMouseScroll' || evt.type === 'keyup' || evt.type === 'mousewheel') {
// up
if (evt.originalEvent.detail < 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta > 0)) {
// down.
} else if (evt.originalEvent.detail > 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta < 0)) {
}
}
});
代わりに、MousewheelイベントとDOMMouseScrollイベントを使用してみてください。http://www.quirksmode.org/dom/events/scroll.htmlを参照してください
準備完了時にスクロール位置を確認できます。on scrollイベントを発生させるときは、スクロール位置がページがロードされたときと異なることを確認してください。最後に、ページをスクロールしたら、保存されている値を必ずクリアしてください。
$(function () {
var loadScrollTop = ($(document).scrollTop() > 0 ? $(document).scrollTop() : null);
$(document).scroll(function (e) {
if ( $(document).scrollTop() !== loadScrollTop) {
// scroll code here!
}
loadScrollTop = null;
});
});
に関して：
具体的には、戻るボタンを使用すると、ブラウザは最後の既知のスクロール位置にジャンプする場合があります。
これは、ページがレンダリングされた後すぐに発生します。スクロールイベントのリッスンを1秒ほど遅らせることができます。
ユーザーが作成したスクロールを分離するもう1つの方法があります。たとえば、「mousewheel」、「touchmove」、「keydown」などの代替イベントハンドラーを使用して、矢印のスクロール、スクロールバーでのスクロールにコード38と40を指定できます。 「scroll」イベントは、「mouseup」イベントまで「mousedown」と同時に発生します。
これは非常に便利でした。これは、そんなに傾倒している人のためのコーヒースクリプトバージョンです。
$ ->
S.userScroll = false
# reset flag on back/forward
if $.history?
$.history.init (hash) ->
S.userScroll = false
mouseEvent = (e)->
S.userScroll = true
$(document).keydown (e) ->
importantKey = (e.which == 33 or # page up
e.which == 34 or # page dn
e.which == 32 or # spacebar
e.which == 38 or # up
e.which == 40 or # down
(e.ctrlKey and e.which == 36) or # ctrl + home
(e.ctrlKey and e.which == 35) # ctrl + end
)
if importantKey
S.userScroll = true;
# Detect user scroll through mouse
# Mozilla/Webkit
if window.addEventListener
document.addEventListener('DOMMouseScroll', mouseEvent, false);
# for IE/OPERA etc
document.onmousewheel = mouseEvent;
より良い答えがあるよりもJQueryを使用している場合は、どうやら-私はそれを自分で試しているだけです。
アプリケーションには役立たないかもしれませんが、ユーザースクロールでイベントを発生させる必要がありましたが、他の人に役立つ場合に備えて、プログラムによるスクロールと投稿は必要ありませんでした。
のwheel代わりにイベントを聞くscroll、
これは、ユーザーがマウスホイールまたはトラッカーパッド（とにかくほとんどの人がスクロールする方法だと思います）を使用するたびにトリガーされ、プログラムでスクロールしても起動されません。ユーザーのスクロールアクションとスクロール機能を区別するために使用しました。
https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event
element.addEventListener('wheel', (event) => {
//do user scroll stuff here
})
注意点の1つは、wheelモバイルのスクロールでは起動しないため、デバイスがモバイルであり、同様の機能を使用しているかどうかを確認しました
if(this.mobile){
element.addEventListener('scroll', (event) => {
//do mobile scroll stuff here
})
}