scrollTop onscroll Unterschiede im Browser

[Gunnar Bittersmann]

@@Henry

function scrollcntrl() 
{
document.getElementsByTagName('h2')[0].innerHTML = document.documentElement.scrollTop;
}

window.onscroll = function(){scrollcntrl()};

// warum reicht hier eigentlich nicht: window.onscroll = scrollcntrl();

Weil das, was du window.onscroll zuweist, eine Funktionsreferenz sein muss. [MDN]

function () { scrollcntrl(); } ist eine anonyme Funktion, die wiederum scrollcntrl aufruft.

scrollcntrl() ist keine Funktionsreferenz, sondern ein Funktionsaufruf; er liefert den Rückgabewert der Funktion scrollcntrl. (Da in dieser Funktion kein return … vorkommt, dürfte der Rückgabewert null sein.)

Funktionsreferenz zuweisen ginge so: window.onscroll = scrollcntrl;

---

Dass man .on… grundsätzlich nicht verwenden sollte, hat beatovich ja schon gesagt. Was in MDN steht (“Element.onscroll is equivalent to element.addEventListener("scroll" ... )”) stimmt nämlich nicht:

window.onscroll = foo;
window.onscroll = bar;

Die zweite Angabe überschreibt die erste. Beim Feuern des Events wird nur bar() ausgeführt.

window.addEventListener('scroll', foo);
window.addEventListener('scroll', bar);

Es werden zwei EventListener definiert. Beim Feuern des Events werden foo() und bar() ausgeführt.

---

Generell sollte man die Überwachung des scroll-Events besser vermeiden. Stromfresser, performance killer.

LLAP 🖖