Ιδιότητα scrollTop του DOM Element HTML

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

scrollTop Η ιδιότητα ορίζει ή επιστρέφει τον αριθμό των pixel που κινείται το περιεχόμενο του στοιχείου κάθετα.

Δείτε επίσης:

Αιρετικότητα scrollLeft

CSS overflow ιδιότητα

onscroll γεγονός

Παράδειγμα

Παράδειγμα 1

Πάρε τον αριθμό των pixel που κινείται το περιεχόμενο του "myDIV":

const element = document.getElementById("myDIV");
let x = elmnt.scrollLeft;
let y = elmnt.scrollTop;

Προσπαθήστε το شخصικά

Παράδειγμα 2

Κάντε το περιεχόμενο του "myDIV" να κινείται οριζόντια σε 50 pixel και κάθετα σε 10 pixel:

const element = document.getElementById("myDIV");
element.scrollLeft = 50;
element.scrollTop = 10;

Προσπαθήστε το شخصικά

Παράδειγμα 3

Κάντε το περιεχόμενο του "myDIV" να κινείται οριζόντια 50 pixel και κάθετα 10 pixel:

const element = document.getElementById("myDIV");
element.scrollLeft += 50;
element.scrollTop += 10;

Προσπαθήστε το شخصικά

Παράδειγμα 4

Γυρίστε το περιεχόμενο του <body> οριζόντια 30 pixel και κάθετα 10 pixel:

const html = document.documentElement;
html.scrollLeft += 30;
html.scrollTop += 10;

Προσπαθήστε το شخصικά

Παράδειγμα 5

Αλλαγή μεταξύ των κλασών σε διαφορετικές θέσεις γυρισμού - Όταν ο χρήστης γυρίζει από την κορυφή της σελίδας προς τα κάτω 50 pixel, η κλάση "test" προστίθεται στο στοιχείο (και αφαιρείται όταν γυρίζει ξανά προς τα πάνω):

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

Προσπαθήστε το شخصικά

Παράδειγμα 6

Όταν ο χρήστης γυρίζει από την κορυφή της σελίδας προς τα κάτω 350 pixel, εισάγεται ένα στοιχείο (προσθέτει την κλάση slideUp):

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

Προσπαθήστε το شخصικά

Γραμματική

Επιστροφή της περιόδου scrollTop:

element.scrollTop

Ορίστε την περιόδο scrollTop:

element.scrollTop = pixels

τιμή περιόδου

τιμή Περιγραφή
pixels

οι pixel που γυρίζει ο περιεχόμενος του στοιχείου κάθετα.

  • Αν ο αριθμός είναι αρνητικός, ο αριθμός ορίζεται ως 0.
  • Αν το στοιχείο δεν μπορεί να γυρίσει, ο αριθμός ορίζεται ως 0.
  • Αν ο αριθμός είναι μεγαλύτερος από την επιτρεπόμενη μέγιστη τιμή, ο αριθμός ορίζεται ως η μέγιστη τιμή.

Επιστροφή τιμής

Τύπος Περιγραφή
αριθμός οι pixel που γυρίζει ο περιεχόμενος του στοιχείου κάθετα.

υποστήριξη περιηγητή

πάντα οι περιηγητές υποστηρίζουν element.scrollTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη