CSS, HTML und Javascript mit {stil}

Javascript scroll • Beim Scrollen einer Webseite oder eines Elements

Javascript onerror

Javascript onscroll ruft einen Event Handler auf, wenn das Dokument oder ein Element gescrollt wird.

Das scroll-Event wurde ursprünglich von Microsoft für Internet Explorer eingeführt. In DOM Level 2 Events gab es das scroll-Event (offiziell) noch nicht, auch wenn es in Javascript präsent war und eingesetzt werden konnte. Mit DOM Level 3 Events ist onscroll jetzt ein Standard-Event.

Beim onscroll Inhalt nachgeladen – so kennen wir das von Google+ oder bei der Bildersuche mit Flickr, bei Pinterest, Vimeo und Facebook. Das Nachladen der Seite sorgt für ein schnelles Laden einer Webseite oder einer App. Ein Script holt Nachschub, sobald der Benutzer scrollt. Dann kann der Benutzer auf der Seite bleiben, und behält den kompletten Inhalt der Seite, wenn er die Seite wieder nach oben scrollt.

Scroll-Event für Seiten

Ein Scroll-Event tritt ein, wenn die Seite bzw. das Dokument im Browserfenster gescrollt wird, aber auch für Elemente wie iframe oder object – für alle Elemente der Seite, die eine Scrollleiste haben können.

Hier entdeckt das Script das scroll auf dem document-Element – wenn das Dokument im Browserfenster gescrollt wird. Sobald der Besucher die Seite zum ersten Mal scrollt, wird eine Grafik eingeblendet, die einen sofortigen Sprung zum Anfang des Dokuments bietet.

Inhalt von .slowup ist der weiße Pfeil im dunklen Feld rechts, der eingeblendet wird, sobald die Seite gescrollt wird. Der Pfeil bleibt auch beim Scrollen immer auf derselben Position im Browserfenster.

.slowup {
   position: fixed; 
   z-index: 2000; 
   width: 60px; height: 50px; 
   right: 0; bottom: 140px;
   transition: opacity 2s 0.5s
}
document.querySelector('.slowup').setAttribute('style','opacity:0');
document.addEventListener ('scroll',function () {
  document.querySelector('.slowup').setAttribute('style','opacity:1');
});

Um beim Klick auf das Symbol langsam nach oben zu scrollen: jQuery animate oder Velocity animate oder Langsam scrollen in Vanilla Javascript mit Smooth Scroll with ankers.

onscroll für Elemente

onscroll kann auf die meisten HTML-Elemente angewendet werden: div, h, p, textarea und mehr. Damit das Element Scrollleisten bekommt, muss seine Höhe eingeschänkt werden und der überfließende Teil durch CSS overflow:hidden verborgen werden.

scrollTop gibt an, um wie weit ein Element vom Anfang des Dokuments gescrollt wurde.

scoll-pic1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut at ipsum. Fusce in sem. Nulla facilisi. Sed augue. Pellentesque quam. Aenean felis turpis, vulputate non, tristique at, commodo vel, turpis.

scoll-pic2 Vivamus vel nibh. Vivamus pede neque, congue et, imperdiet in, adipiscing elementum, massa. Curabitur sem metus, hendrerit quis, pulvinar sit amet, viverra id, odio.

scoll-pic3 Quisque quis quam. Phasellus arcu. In molestie pretium leo. Sed semper eleifend velit. Sed tincidunt, nulla tincidunt condimentum ullamcorper, tortor magna scelerisque ante, vel luctus nisi mauris quis mi.

<script type="text/javascript">
var box = document.getElementById('box');
box.onscroll = function () {
var showscroll = document.getElementById('showscroll');
   showscroll.innerHTML = "Box wird gescrollt " + this.scrollTop;
   
}
</script>

Inhalt beim Scrollen laden

onscroll feuert zwar auch wie oben auf ein Element des DOM, ist aber auch ein Event für window. Für das Nachladen des Inhalts kommen viele Verfahren in Betracht – serverseitige Anwendungen und Inhalte aus der Datenbank, JSON, XML.

Im einfachsten Fall »füllt« das Script die Seite beim Scrollen einmal auf. Dabei kann das Event wieder ausgeschaltet werden.

window.onscroll = function () {
   window.onscroll = null;
   …
}

JSON und Ajax mit dem XMLHttpRequest stellen die beliebteste Technik zum Nachladen von Inhalt.

Attribute

target
Objekt zu dem das Ereignis ursprünglich gesendet wurde
eventPhase
Phase, in der das Ereignis bearbeitet wird: AT_TARGET, BUBBLING_PHASE, CAPTURING_PHASE
bubbles
true, wenn das Ereignis nach oben steigen kann
cancelable
Nein/dd>
timeStamp
Zeit in Millisekunden, zu der das Ereignis eingetreten ist