Frage: In H5 haben wir eine solche Anforderung: Wenn beispielsweise eine Liste vorhanden ist, muss beim Scrollen nach unten mehr geladen werden.
Lösung: Sie können das Scroll-Ereignis des Fensters zur Verarbeitung verwenden
Analyse: Wenn das Scrollen für den gesamten Bildschirm gilt (nicht für einen bestimmten Schnittstellenblock), dann sollte Folgendes gelten: Höhe des Bildschirms + maximale Scrolldistanz = Höhe des Inhalts
Code-Implementierung:
<html> <head> <meta charset=UTF-8> <title>Anhören, um nach unten zu scrollen, nach unten scrollen</title> <style> .div2{width:100px;height:100px;border:1px durchgehend rot }*{margin :0}.button1:active{ background:red}body{height:375px;width:667px;border:1px solid rot}.div1{height:600px;width:100%;Hintergrund:rot}.div2{height:600px;width:100%;Hintergrund:grün}.div3{height:600px;width:100%;Hintergrund:blau} .div4{height:600px;width:100%;background:yellow} </style> </head> <body> <div class=div0> <div class=div1></div> <div class=div2></div> <div class=div3></div> <div class=div4>< /div> <div class=div5></div> </div> </body> <script> window.onload = function(){ //Das übergeordnete Element des Containers abrufen var div0 = document.getElementsByClassName('div0') [ 0]; //Höhe Die Höhe des berechneten Attributs var height = parseInt((window.getComputedStyle(div0, null).height).replace('px', '')); console.log(height, berechnete Höhe von div0) window.onscroll = function(){/*scrollTop ist der Abstand zwischen dem oberen Rand der Bildlaufleiste und der oberen rechten Ecke der Benutzeroberfläche. Hier wird die Kompatibilitätsschreibmethode verwendet*/let scrollTop = document.documentElement &&. document.documentElement.scrollTop ? document.documentElement.scrollTop : //+-5 soll ein gewisses Maß an Flexibilität gewährleisten, es muss nicht genau gleich sein, if(height-5<=scrollTop+ clientHeight&&scrollTop+clientHeight< =height+5){ console.log('Hören erfolgreich', 'Am Ende angekommen') } } } </script></html> Relevante Erklärung des Codes: Beim Laden der Liste können wir häufig nicht die Höhe des übergeordneten Containers festlegen, der die untergeordneten Elemente lädt. Wenn der Stil zu diesem Zeitpunkt auf „Auto“ eingestellt ist, ist element.style.height ebenfalls gleich auto. Es wird empfohlen, clientHeight zu verwenden oder den Berechnungsstil getComputedStyle zu verwenden, um die Höhe zu berechnen
Zusammenfassen
Das Obige stellt Ihnen der Herausgeber vor, um das Problem des Scrollens zum unteren Ereignis in HTML5 zu lösen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen antworten Zeit. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!
Wenn Sie der Meinung sind, dass dieser Artikel für Sie hilfreich ist, können Sie ihn gerne erneut drucken. Bitte geben Sie die Quelle an. Vielen Dank!