Machen Sie "ScrollLeft"/"ScrollTop" Änderungen nicht Scroll Event Listener

Question

Derzeit ist mein Programm an einer Stelle, wo es sowohl für den Benutzer ein bestimmtes Element scrollen, sondern auch manchmal automatisch dieses Element selbst scrollt. (Nicht eine allmähliche, schöne Scroll, aber ein sofortiger Sprung. Es macht Sinn im Zusammenhang, ich schwöre.)

Gibt es eine Möglichkeit, die Scroll-Ereignis nicht auslösen, wenn das Scrollen durch Einstellung ScrollLeft oder ScrollTop getan wurde? Mein erster Gedanke war ein Basisschalter, wie:

ignoreScrollEvents = true; 
element.scrollLeft = x; 
ignoreScrollEvents = false; 

function onScroll() { 
    if(ignoreScrollEvents) return false; 
} 

aber da Ereignisse nicht sofort auslösen (oops, duhh), das ist keine praktikable Lösung. Welche anderen Antworten könnte ich versuchen? Ich benutze auch jQuery, wenn das irgendwas hilft.

Answer 1

einfachste generische Methode ? Setzen Sie das Flag im Event-Handler zurück. Sie sollten zuerst überprüfen, ob Sie tatsächlich den Wert ändern, da sonst ein Ereignis nicht ausgelöst wird - als Rodrigo notes ist es eine gute Übung, dies in so genannte "Setter" -Funktionen zu berücksichtigen:

function setScrollLeft(x) 
{ 
    if (element.scrollLeft != x) 
    { 
    ignoreScrollEvents = true; 
    element.scrollLeft = x; 
    } 
} 

... 

function onScroll() 
{ 
    var ignore = ignoreScrollEvents; 
    ignoreScrollEvents = false; 

    if (ignore) return false; 

    ... 
} 

Aber, je nach Ihren Bedürfnissen, speichern Sie die Scroll-Position möglicherweise bereits irgendwo; Wenn ja, aktualisiere und überprüfe das als deine Flagge. Etwas wie:

element.scrollLeft = currentScrollLeft = x; 

... 

function onScroll() 
{ 
    // retrieve element, etc... 

    if (element.scrollLeft == currentScrollLeft) return false; 

    ... 
} 

Answer 2

könnte Sie constantly check wenn die scroll position Änderungen ...

Answer 3

Sie könnten versuchen, den Offset oben auf Ihrem Element zu speichern und gegen die scrollTop passend, wenn Sie innerhalb OnScroll Schritt:

function onScroll(){ 
    var scrollTop = (document.documentElement.scrollTop || document.body.scrollTop), 
    offsetTop = $('selector').offset().top; 
    if(offsetTop > scrollTop){ 
     //user has not scrolled to element so do auto scrolling 
    } 
} 

Answer 4

Wie wäre es mit einem Setter?

var _preventEvent = false; // set global flag 
 

 
function setScrollTop(amount) { 
 
    _preventEvent = true; // set flag 
 
    document.documentElement.scrollTop = amount * Math.random(); 
 
} 
 

 
function setScrollLeft(amount) { 
 
    _preventEvent = true; // set flag 
 
    document.documentElement.scrollLeft = amount * Math.random(); 
 
} 
 

 
// scroll event listener 
 
window.onscroll = function() { 
 
    console.clear(); 
 
    
 
    if (_preventEvent) { 
 
    _preventEvent = false; // reset flag 
 
    return; 
 
    } 
 
    
 
    console.log('normal scroll'); 
 
}

html{ height:500%; width:500%; } 
 
button{ position:fixed; } 
 
button + button{ top:50px; }

<button onclick=setScrollTop(1000)>Random scrollTop</button> 
 
<button onclick=setScrollLeft(1000)>Random scrollLeft</button>

Answer 5

In Ordnung, meine endgültige Lösung, aus den Bau von Shog9 (nicht mein richtiger Code, aber mein Ansatz):

var oldScrollLeft = element.scrollLeft; 
element.scrollLeft = x; 
if(element.scrollLeft != oldScrollLeft) { 
    ignoreScrollEvents = true; 
} 

function onScroll() { 
    if(!ignoreScrollEvents) performGreatActions(); 
    ignoreScrollEvents = false; 
} 

Die if-Anweisung nur die Flagge ignorieren setzt wenn der scrollLeft-Wert sich tatsächlich ändert, werden Fälle wie die Einstellung von 0 auf 0 das Flag nicht falsch setzen.

Danke, alle!