Beispiel:JS-Event-onscroll.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
 <link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:Grundlayout.css" />
 <style>

section { 

 height: 12em;
 width: 12em;
 border: 1px solid black;
 overflow: scroll;

} section p { 

 height: 12em;

} 

 </style>
 <title>Beispiel: scroll Event</title>

</head>

<body>

Beispiel: scroll Event

 <main>
   <section id="eins">

Kapitel 1

Wenn du in diesem Kapitel scrollst, erscheint eine Meldung darüber.

   </section>


 </main>

<script> 

 var elem = document.getElementById('eins');
 elem.addEventListener('scroll', Meldung);

 function Meldung(){
     var txt = 'Du hast um ' + elem.scrollTop +'px gescrollt!';
     document.getElementById('ausgabe').innerHTML = txt;
 }

</script> </body> </html>

Abgerufen am 23.09.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:JS-Event-onscroll.html"