So verstehen Sie Scrollen
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>
<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>
Nach dem Login kopieren
【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 🎜🎜#<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.
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)方法将元素的内容滚动指定的行髙，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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Was ist die Scroll-Taste?
Feb 22, 2023 pm 02:29 PM
Scroll ist die Scroll-Sperrtaste, eine Funktionstaste auf einer Computertastatur. Die Scroll-Taste wird häufig in Word und Excel verwendet. Wenn die Scroll-Taste deaktiviert ist und die Umblättertaste verwendet wird, wird der ausgewählte Bereich der Zellen verschoben . von Zellen.
Was bedeutet das Scrolllicht der Tastatur?
Feb 20, 2023 pm 01:42 PM
Das Aufleuchten der Scroll-Taste auf der Tastatur bedeutet, dass die „Scroll Lock“-Taste im Win-System nicht verwendet wird, aber einige Softwareprogramme verwenden diese Funktionstaste. Nach dem Drücken dieser Taste werden die Auf- und Ab-Tasten von Excel gesperrt Scrollen. Der Cursor scrollt durch die Seite. Wenn Sie diese Taste loslassen, wird der Cursor durch Drücken der Auf- und Ab-Taste gescrollt, ohne die Seite zu scrollen.
So verstehen Sie Scrollen
May 23, 2023 pm 01:40 PM
Scrollbreite und -höhe scrollHeight scrollHeight stellt die Gesamthöhe des Elements dar, einschließlich des unsichtbaren Teils, der aufgrund eines Überlaufs nicht auf der Webseite angezeigt werden kann scrollWidth scrollWidth stellt die Gesamtbreite des Elements dar, einschließlich des unsichtbaren Teils, der nicht auf der Webseite angezeigt werden kann Seite wegen Überlauf [Hinweis] IE7-Browser Der Rückgabewert ist ungenau [1] Wenn keine Bildlaufleiste vorhanden ist, sind die Attribute scrollHeight und clientHeight gleich und die Attribute scrollWidth und clientWidth sind gleich //120120console.log(test.scrollHeight ,test.s
So verwenden Sie v-on:scroll, um in Vue auf Scroll-Ereignisse zu warten
Jun 11, 2023 pm 12:14 PM
Vue ist derzeit eines der beliebtesten Front-End-Frameworks. Zusätzlich zur allgemeinen Ereignisüberwachung bietet Vue auch eine Anweisung zur Überwachung von Scroll-Ereignissen, nämlich v-on:scroll. In diesem Artikel wird detailliert beschrieben, wie Sie mit v-on:scroll auf Scroll-Ereignisse in Vue warten. 1. Grundlegende Verwendung der v-on:scroll-Anweisung Die v-on:scroll-Anweisung wird zum Überwachen der Bildlaufereignisse von DOM-Elementen verwendet. Ihre grundlegende Verwendung ist wie folgt: <divv-on:scroll="sc
So verbergen Sie den Bildlauf in CSS
Jan 28, 2023 pm 02:02 PM
So verbergen Sie den Bildlauf in CSS: 1. In Firefox können Sie die Bildlaufleiste über das Attribut „scrollbar-width: none; /* Firefox */“ ausblenden. 2. Im IE-Browser können Sie das „-ms-prefix“ verwenden " Attribut Definieren Sie den Stil der Bildlaufleiste. 3. In Chrome und Safari können Sie den CSS-Bildlaufleisten-Selektor verwenden und ihn dann über „display:none“ ausblenden.
Was ist Ethereum Scroll? Wie arbeite ich Ethereum Scroll?
Feb 15, 2025 pm 10:33 PM
Ethereum Scroll ist eine Skalierungslösung von Layer 2, um die Skalierbarkeit des Ethereum-Netzwerks durch Sharding- und ZK-Rollup-Technologien zu verbessern. Es kombiniert diese beiden Technologien, um Transaktionen parallel zu verarbeiten und effizient zu überprüfen, wodurch der Netzwerkdurchsatz und die Reduzierung der Transaktionsgebühren erheblich verbessert wird. Scroll ist eine kompatible Erweiterungsschicht für Virtual Machines (EVMs) von Ethereum, sodass Benutzer Transaktionen schnell und wirtschaftlich verarbeiten können.
Scroll, das schnell wachsende Zero-Knowledge-Layer-2-Netzwerk, bestätigte, dass es seinen Airdrop am 19. Oktober starten wird
Oct 12, 2024 am 12:14 AM
Dieser Rückgang ist teilweise darauf zurückzuführen, dass es dem breiteren Kryptomarkt nicht gut geht und der Angst- und Gier-Index unter 45 liegt. Bitcoin hat es auch nicht geschafft, den Widerstandspunkt bei 65.000 US-Dollar zu überwinden.
Einführung des Scroll (SCR)-Tokens: Ein Schritt in Richtung Dezentralisierung
Oct 11, 2024 pm 10:18 PM
Mit der Einführung des Tokens will Scroll seine Governance verbessern und seine Rolle als wichtiger Akteur im Ethereum-Ökosystem festigen.
