HTML-DOM scrollTop- Eigenschaft
Beispiel
Ermitteln Sie die Anzahl der Pixel, um die der Inhalt eines <div> -Elements horizontal und vertikal gescrollt wird:
var elmnt = document.getElementById("myDIV");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die scrollTop-Eigenschaft legt die Anzahl der Pixel fest, um die der Inhalt eines Elements vertikal gescrollt wird, oder gibt sie zurück.
Tipp: Verwenden Sie die scrollLeft- Eigenschaft, um die Anzahl der Pixel festzulegen oder zurückzugeben, um die der Inhalt eines Elements horizontal gescrollt wird.
Tipp: Um einem Element Bildlaufleisten hinzuzufügen, verwenden Sie die CSS- Überlaufeigenschaft .
Tipp: Das Ereignis onscroll tritt auf, wenn die Bildlaufleiste eines Elements gescrollt wird.
Browser-Unterstützung
| Property | |||||
|---|---|---|---|---|---|
| scrollTop | Yes | Yes | Yes | Yes | Yes |
Syntax
Geben Sie die scrollTop-Eigenschaft zurück:
element.scrollTop
Legen Sie die scrollTop-Eigenschaft fest:
element.scrollTop = pixels
Eigenschaftswerte
| Value | Description |
|---|---|
| pixels |
Specifies the number of pixels the element's content is scrolled vertically. Special notes:
|
Technische Details
| Rückgabewert: | Eine Zahl, die die Anzahl der Pixel darstellt, um die der Inhalt des Elements vertikal gescrollt wurde |
|---|
Mehr Beispiele
Beispiel
Scrollen Sie den Inhalt eines <div>-Elements BIS 50 Pixel horizontal und 10 Pixel vertikal:
var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft = 50;
elmnt.scrollTop = 10;
Beispiel
Scrollen Sie den Inhalt eines <div>-Elements UM 50 Pixel horizontal und 10 Pixel vertikal:
var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft += 50;
elmnt.scrollTop += 10;
Beispiel
Scrollen Sie den Inhalt von <body> horizontal um 30 Pixel und vertikal um 10 Pixel:
var body = document.body; // Safari
var html = document.documentElement; //
Chrome, Firefox, IE and Opera places the overflow at the <html> level, unless else is specified. Therefore, we use the
documentElement property for these browsers
body.scrollLeft += 30;
body.scrollTop += 10;
html.scrollLeft += 30;
html.scrollTop += 10;
Beispiel
Umschalten zwischen Klassennamen an verschiedenen Bildlaufpositionen – Wenn der Benutzer 50 Pixel vom oberen Rand der Seite nach unten scrollt, wird der Klassenname „test“ zu einem Element hinzugefügt (und entfernt, wenn er wieder nach oben gescrollt wird).
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 = "";
}
}
Beispiel
Schieben Sie ein Element ein, wenn der Benutzer vom oberen Rand der Seite 350 Pixel nach unten gescrollt hat (fügen Sie die Klasse slideUp hinzu):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}
Beispiel
Zeichnen Sie ein Dreieck auf die Schriftrolle:
<!-- 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>