Heim > Artikel > Betrieb und Instandhaltung > So verstehen Sie Scrollen
So verstehen Sie Scrollen
- WBOYnach vorne
- 2023-05-23 13:40:321453Durchsuche
Scrollbreite und -höhe
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>【2】Wenn eine Bildlaufleiste vorhanden ist, aber die Breite und Höhe des Elements größer oder gleich der Breite und Höhe des Elementinhalts sind, wird die Die Ergebnisse der Scroll- und Client-Attribute sind gleich Bei einem Inhaltsüberlauf ist das Scroll-Attribut größer als das Client-Attribut IE und Firefox enthalten kein padding-bottom
<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>page size document.documentElement.clientHeight stellt die Größe des sichtbaren Bereichs der Seite dar, während document.documentElement . scrollHeight stellt die tatsächliche Größe des HTML-Elementinhalts dar. Aufgrund der unterschiedlichen Leistung jedes Browsers wird es jedoch in die folgenden Situationen unterteilt: 【1】Wenn das HTML-Element keine Bildlaufleiste hat, sind es die Client- und Bildlaufattribute von IE und Firefox immer derselbe, und der Wert des visuellen Bereichs wird zurückgegeben. Größe; während sich Safari und Chrome normal verhalten, gibt clientHeight die Größe des visuellen Bereichs und scrollHeight die Größe des Elementinhalts zurück
<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>
【2】Wenn das HTML-Element über eine Bildlaufleiste verfügt, verhalten sich alle Browser normal. clientHeight stellt die Größe des Ansichtsfensterbereichs bereit, während scrollHeight die Größe des Elementinhalts bereitstellt Ermitteln Sie die tatsächliche Höhe des Dokuments. Wenn Sie den Maximalwert von scrollHeight und clientHeight des -Elements erhalten möchten 🎜🎜##🎜 🎜# 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)Daher wird die Scrollhöhenkompatibilität der Seite wie folgt geschrieben:
<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 + clientHeightDort Es gibt auch zwei schreibgeschützte Eigenschaften des Fensters, die den Pixelwert des gesamten Seitenscrollens ermitteln können. Sie sind pageXOffset und pageYOffset
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>#🎜🎜 #Scroll-Methode
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.
Wenn der Parameter alignCenter auf true gesetzt ist, wird das Element im Ansichtsfenster möglichst vertikal zentriert angezeigt 🎜# ] Diese Methode wird nur von Chrome und Safari unterstützt
<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)
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!
In Verbindung stehende Artikel
Mehr sehen- Detaillierte Einführung in die Datenübertragungssicherheit von DSMM
- Zusammenfassung von 40 häufig genutzten Intrusion-Ports für Hacker, die es wert sind, gesammelt zu werden
- Drei Prozessinjektionstechniken in der Mitre ATT&CK-Matrix
- Grundsätze der sicheren Entwicklungspraxis
- So beheben Sie die Sicherheitslücke bei der Remote-Befehlsausführung in der Apache-Achsenkomponente