scrollHeight
scrollHeight stellt die Gesamthöhe des Elements dar, einschließlich unsichtbarer Teile, die nicht angezeigt werden können die Webseite aufgrund eines Überlaufs Part
scrollWidth
scrollWidth stellt die Gesamtbreite des Elements dar, einschließlich des unsichtbaren Teils, der nicht angezeigt werden kann die Webseite aufgrund eines Überlaufs
# 🎜🎜# [Hinweis] Der Rückgabewert des IE7-Browsers ist ungenau【1】Wenn keine Bildlaufleiste vorhanden ist, sind die Attribute scrollHeight und clientHeight gleich. und die Attribute scrollWidth und clientWidth sind gleich<div id="test" ></div><script>//120 120console.log(test.scrollHeight,test.scrollWidth);//120 120console.log(test.clientHeight,test.clientWidth);</script>
<div id="test" > 内容<br>内容<br></div><script>//103(120-17) 103(120-17)console.log(test.scrollHeight,test.scrollWidth);//103(120-17) 103(120-17)console.log(test.clientHeight,test.clientWidth);</script>
<div id="test" > 内容</div><script>//chrome/safari:220(200+10+10)//firefox/IE:210(200+10)console.log(test.scrollHeight);//103(120-17)console.log(test.clientHeight);</script>
#🎜 🎜# Das scrollTop-Attribut stellt die Anzahl der Pixel dar, die über dem Inhaltsbereich verborgen sind. Wenn das Element nicht gescrollt wird, ist der Wert von scrollTop 0. Wenn das Element vertikal gescrollt wird, ist der Wert von scrollTop größer als 0 und stellt die Pixelbreite des unsichtbaren Inhalts über dem Element dar
# 🎜🎜#scrollLeft#🎜🎜 #
Die scrollLeft-Eigenschaft gibt die Anzahl der Pixel an, die links vom Inhaltsbereich ausgeblendet sind. Wenn das Element nicht gescrollt wird, ist der Wert von scrollLeft 0. Wenn das Element horizontal gescrollt wird, ist der Wert von scrollLeft größer als 0 und stellt die Pixelbreite des unsichtbaren Inhalts auf der linken Seite des Elements dar
# 🎜🎜# Wenn die Bildlaufleiste zum Ende des Inhalts scrollt. Wenn die folgende Gleichung erfüllt ist: [Hinweis] Weisen Sie scrollLeft und scrollTop negative Werte zu. Wenn kein Fehler gemeldet wird, schlägt dies jedoch stillschweigend fehl kann über document.documentElement.scrollTop und scrollLeft reflektiert und gesteuert werden; Chrome- und Safari-Browser werden jedoch über document.body.scrollTop und scrollLeft gesteuert//firefox: 755 755//chrome: 947 8(body元素的margin)//safari: 744 8(body元素的margin)//IE: 768 768console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)
<body ><script>//firefox: 755 1016(1000+8*2)//chrome: 947 1016(1000+8*2)//safari: 744 1016(1000+8*2)//IE: 768 1016(1000+8*2)console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)</script>
Zurück nach oben
Sie können scrollTop verwenden, um die Funktion zum Zurückkehren nach oben zu realisierenvar docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
scrollHeight == scrollTop + clientHeight
pageYOffset in vertikaler Richtung
[Hinweis] IE8-Browser unterstützt nicht <div id="test" >
内容</div><button id='btn1'>点击</button><div id="result"></div><script>btn1.onclick = function(){
result.innerHTML = 'scrollTop:' + test.scrollTop+';clientHeight:' + test.clientHeight + ';scrollHeight:' + test.scrollHeight
}</script>
scrollTo(x,y)
Die scrollTo(x,y)-Methode scrollt durch das im aktuellen Fenster angezeigte Dokument und lässt das Dokument zu. Der durch die Koordinaten x und y angegebene Punkt befindet sich in der oberen linken Ecke des Anzeigebereich Die y)-Methode scrollt das im aktuellen Fenster angezeigte Dokument. x und y geben den relativen Umfang des Bildlaufs an. 🎜🎜#Die Methode Element.scrollIntoView scrollt das aktuelle Element in den sichtbaren Bereich des Browsers
Diese Methode kann einen booleschen Wert als Parameter akzeptieren. Bei „true“ bedeutet dies, dass die Oberseite des Elements an der Oberseite des sichtbaren Teils des aktuellen Bereichs ausgerichtet ist (vorausgesetzt, der aktuelle Bereich ist scrollbar); bei „false“ bedeutet dies, dass die Unterseite des Elements an ausgerichtet ist das Ende des sichtbaren Teils des aktuellen Bereichs (vorausgesetzt, der aktuelle Bereich ist scrollbar). Wenn dieser Parameter nicht angegeben wird, ist er standardmäßig auf „true“ gesetzt. Nur wenn es sichtbar ist, kann das Browserfenster oder Containerelement gescrollt werden, bis es schließlich sichtbar ist. Wenn das aktuelle Element im Ansichtsfenster sichtbar ist, führt diese Methode nichts aus.
<div id="test" >
内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</button><script>btn1.onclick = function(){test.scrollTop += 10;}
btn2.onclick = function(){test.scrollTop -= 10;}</script>scrollByLines(lineCount)方法将元素的内容滚动指定的行髙，lineCount值可以是正值， 也可以是负值
[注意]该方法只有safari支持
<div id="test" >
内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</button><script>btn1.onclick = function(){test.scrollByLines(1);}
btn2.onclick = function(){test.scrollByLines(-1);}</script>scrollByPages(pageCount)
scrollByPages(pageCount)方法将元素的内容滚动指定的页面高度，具体高度由元素的高度决定
[注意]该方法只有safari支持
<div id="test" >
内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</button><script>btn1.onclick = function(){test.scrollByPages(1);}
btn2.onclick = function(){test.scrollByPages(-1);}</script>在页面中相应元素发生变化时，scroll事件会在window对象上触发。当然，scroll事件也可以用在有滚动条的元素上
<body ><div id="result" ></div><script>window.onscroll = function(){
result.innerHTML = '页面的scrollTop:' + (document.documentElement.scrollTop||document.body.scrollTop);
}</script> </body>Das obige ist der detaillierte Inhalt vonSo verstehen Sie Scrollen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
