CSS, HTML und Javascript mit {stil}

Javascript onscroll • beim Scrollen einer Webseite oder eines Elements

JS onscroll: Aktionen beim Scrollen durchführen Eine Hand mit drei Fingern (ein altes Scrollsymbol) und Pfeile rauf und runter

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

Das scroll-Event ist die Basis für viele Javascript-Effekte: Vom Nachladen des Inhalts bis zum Parallax-Effekt.

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.

onscoll beim Scrollen der Seite

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.

onscroll beim Scrollen eines Elements

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.

Animation starten, wenn sie in den Viewport kommt

Javascript Animation starten oder ein Bild/Inhalt zeigen oder nachladen, wenn das Bild beim Scrollen in den Viewport kommt. Praktisch, wenn Inhalte mit JSON nachgeladen wurden oder eine Animation erst starten soll, wenn der Benutzer sie sehen kann.

// wie weit von oben ist sitzt das Element?
var elemIsVisible = document.getElementById('boot').offsetHeight; 

var boot;
window.onscroll = function () {
   // 0 unsichtbar • > 0 sichtbar
   if (elemIsVisible > 0 ) {
      boot = new Vivus('boot', {type: 'scenario', duration: 100});
   }
   window.onscroll = null;
}

offsetHeight gibt bei SVG-Elementen in IE11 undefined zurück. Ein SVG darum in ein div oder figure wickeln.

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
ONSCROLL