Beispiel:JS-Event-onwheel.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0;" /> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css" /> <title>Beispiel: onwheel Event</title>
</head>
<body>
Beispiel: onwheel Event
<main id="buehne">
Am Rad drehen!
Scrolle mit dem Mausrad hin und her, um die Schriftgröße zu verändern.
Da dies logischerweise nur mit Mäusen geht, ist diese Funktion für Touch-Gräte wie IPhone und Tablets natürlich sinnlos.
</main>
<script>
var elem = document.getElementById("buehne");
elem.addEventListener("wheel", amRadDrehen, true);
function amRadDrehen(event) {
if (!this.actSize) this.actSize = 1;
if (event.deltaY < 0) {
this.actSize = this.actSize / 2;
} else {
this.actSize = this.actSize * 2;
}
this.style.fontSize = this.actSize+"em";
}
</script> </body> </html>
