Neueste Web-Entwicklung Tutorials
 

HTML DOM scrollTop Propery

<Element Object

Beispiel

Erhalten der Anzahl der Pixel der Inhalt eines <div> Element ist horizontal und vertikal gescrollt:

var elmnt = document.getElementById("myDIV");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
Versuch es selber "

Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.

Definition und Verwendung

Die scrollTop Eigenschaftssätze oder gibt die Anzahl der Pixel mit einem Inhalt des Elements vertikal gescrollt wird.

Tipp: Verwenden Sie die scrollleft Eigenschaft festlegen oder die Anzahl der Pixel eines Elements zurück Inhalt horizontal gescrollt wird.

Tipp: Um die Bildlaufleisten zu einem Elemente hinzuzufügen, die CSS - Überlauf - Eigenschaft.

Tipp: Das onscroll Ereignis tritt auf, wenn ein Element Scrollbar gescrollt wird.

Browser-Unterstützung

Eigentum
scrollTop Ja Ja Ja Ja Ja

Syntax

Bringen Sie die scrollTop Eigenschaft:

element .scrollTop

Stellen Sie die scrollTop Eigenschaft:

element .scrollTop= pixels

Eigenschaftswerte

Wert Beschreibung
pixels Gibt die Anzahl von Pixeln Inhalt des Elements vertikal gescrollt wird.

Besondere Hinweise:
  • Wenn die Zahl einen negativen Wert ist, wird die Zahl zu setzen "0"
  • Wenn das Element nicht gescrollt werden kann, wird die Zahl zu setzen "0"
  • Wenn die Anzahl größer ist als der maximal zulässige scroll Betrag, wird die Anzahl der maximalen Anzahl eingestellt

Technische Details

Rückgabewert: Eine Zahl, die die Anzahl der Pixel, die den Inhalt des Elements wurde vertikal gescrollt worden
Beispiele

Mehr Beispiele

Beispiel

Blättern , den Inhalt eines <div> Element 50 Pixel horizontal und 10 Pixel vertikal:

var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft = 50;
elmnt.scrollTop = 10;
Versuch es selber "

Beispiel

Blättern , den Inhalt eines <div> Element durch 50 Pixel horizontal und 10 Pixel vertikal:

var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft += 50;
elmnt.scrollTop += 10;
Versuch es selber "

Beispiel

Blättern , den Inhalt von <body> um 30 Pixel horizontal und 10 Pixel vertikal:

var body = document.body; // For Chrome, Safari and Opera
var html = document.documentElement; // Firefox and IE places the overflow at the <html> level, unless else is specified. Therefore, we use the documentElement property for these two browsers
body.scrollLeft += 30;
body.scrollTop += 10;
html.scrollLeft += 30;
html.scrollTop += 10;
Versuch es selber "

Beispiel

Umschalten zwischen den Klassennamen auf verschiedene Bildlaufpositionen - Wenn du den Benutzer nach unten scrollt 50 Pixel von oben auf der Seite, der Klassenname "test" wird an ein Element hinzugefügt werden (and removed when scrolled up again) werden, (and removed when scrolled up again) .

window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementById("myP").className = "test";
    } else {
        document.getElementById("myP").className = "";
    }
}
Versuch es selber "

Beispiel

Schieben Sie in einem Element , wenn der Benutzer 350 Pixel vom oberen Rand der Seite nach unten gescrollt hat (add the slideUp class) Sie (add the slideUp class) :

window.onscroll = function() {myFunction()};

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

Beispiel

Zeichnen Sie ein Dreieck auf der Taste:

<!-- Use SVG to draw the triangle (has to be <path>) -->
<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z">
</svg>

<script>
// Get the id of the <path> element and the length of <path>
var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();

// The start position of the drawing
triangle.style.strokeDasharray = length;

// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
triangle.style.strokeDashoffset = length;

// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);

function myFunction() {
    var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

    var draw = length * scrollpercent;

    // Reverse the drawing (when scrolling upwards)
    triangle.style.strokeDashoffset = length - draw;
}
</script>
Versuch es selber "

<Element Object