Question : Dans H5, nous avons une telle exigence : par exemple, lorsqu'il y a une liste, il faut en charger davantage lors du défilement vers le bas.
Solution : vous pouvez utiliser l'événement de défilement de la fenêtre pour le traitement
Analyse : Si le défilement concerne tout l'écran (pas un certain bloc d'interface), alors cela devrait être vrai : hauteur de l'écran + distance de défilement maximale = hauteur du contenu
Implémentation du code :
<html> <head> <meta charset=UTF-8> <title>Écouter pour faire défiler vers le bas faire défiler vers le bas</title> <style> .div2{width:100px;height:100px;border:1px solid red }*{margin :0}.button1:active{ background:red}body{height:375px;width:667px;border:1px solid rouge}.div1{hauteur:600px;largeur:100%;arrière-plan:rouge}.div2{hauteur:600px;largeur:100%;arrière-plan:vert}.div3{hauteur:600px;largeur:100%;arrière-plan:bleu} .div4{hauteur:600px;largeur:100%;arrière-plan:jaune} </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(){ //Obtenir l'élément parent du conteneur var div0 = document.getElementsByClassName('div0') [ 0]; //hauteur La hauteur de l'attribut calculé var height = parseInt((window.getComputedStyle(div0, null).height).replace('px', '')); console.log(height, hauteur calculée de div0) window.onscroll = function( ){/*scrollTop est la distance entre le haut de la barre de défilement et le coin supérieur droit de l'interface. La méthode d'écriture de compatibilité est utilisée ici*/let scrollTop = document.documentElement &&. document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; //+-5 est pour assurer un certain degré de flexibilité, il n'est pas nécessaire qu'il soit exactement égal, if(height-5<=scrollTop+ clientHeight&&scrollTop+clientHeight< =height+5){ console.log('Écoute réussie', 'Arrivé en bas') } } } </script></html> Explication pertinente du code : Souvent, lorsque la liste est chargée, nous ne pouvons pas définir la hauteur du conteneur parent chargeant les éléments enfants. À ce stade, lorsque le style est défini sur auto, element.style.height sera également égal à. auto Il est recommandé d'utiliser clientHeight ou d'utiliser le style de calcul getComputedStyle calcule la hauteur.
Résumer
Ce qui précède est ce que l'éditeur vous présente pour résoudre le problème du défilement vers le bas de l'événement en HTML5. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra dans. temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !
Si vous pensez que cet article vous est utile, n'hésitez pas à le réimprimer, veuillez indiquer la source, merci !