Συμβάν onscroll

Δημιουργία Ενεργειών DOM Συσκευές Οντότητας Event

Ορισμός και χρήση

Το συμβάν onscroll συμβαίνει όταν η στήλη σκιερνά του στοιχείου σκιερνά.

Συμβουλή:Χρησιμοποιήστε το CSS Πολλάυσμα Η ιδιότητα του στυλ δημιουργεί στήλη σκιερνά για το στοιχείο.

Παράδειγμα

Παράδειγμα 1

Εκτελείτε JavaScript κατά τη σκιερνά της στοιχείου <div>:

<div onscroll="myFunction()">

Try it yourself

Παράδειγμα 2

Κατά τη μεταβλητή μεταξύ των ονομάτων κλάσης σε διαφορετικές θέσεις στήριξης - όταν ο χρήστης σκιερνά από την κορυφή της σελίδας προς τα κάτω 50 pixels, το όνομα κλάσης "test" θα προστεθεί στο στοιχείο (και θα αφαιρεθεί όταν ξανασκιερνά προς τα πάνω).

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {}}
    document.getElementById("myP").className = "test";
  }
    document.getElementById("myP").className = "";
  }
}

Try it yourself

Example 3

Slide in element (add slideUp class) when the user scrolls down 350 pixels from the top of the page:

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

Try it yourself

Syntax

In HTML:

<element onscroll="myScript">

Try it yourself

In JavaScript:

object.onscroll = function(){myScript};

Try it yourself

In JavaScript, use the addEventListener() method:

object.addEventListener("scroll", myScript);

Try it yourself

Note:Internet Explorer 8 or earlier versions do not support addEventListener() method.

Technical details

Bubbling: Not supported
Cancelable: Not supported
Event type: If generated from the user interfaceUiEvent. Otherwise Event.
Supported HTML tags: address, blockquote, body, caption, center, dd, dir, div, dl, dt, fieldset, form, h1 to h6, html, li, menu, object, ol, p, pre, select, tbody, textarea, tfoot, thead, ul
Έκδοση DOM: Level 2 Events

Υποστήριξη Browser

Συσκευές Οντότητας Event Chrome IE Firefox Safari Opera
onscroll Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη
Δημιουργία Ενεργειών DOM Συσκευές Οντότητας Event