Pregunta: En H5, tenemos este requisito: por ejemplo, cuando hay una lista, es necesario cargar más al desplazarse hacia abajo.
Solución: puede utilizar el evento de desplazamiento de la ventana para procesar
Análisis: si el desplazamiento es para toda la pantalla (no para un determinado bloque de interfaz), entonces esto debería ser cierto: altura de la pantalla + distancia máxima de desplazamiento = altura del contenido
Implementación del código:
<html> <head> <meta charset=UTF-8> <title>Escuche para desplazarse hacia abajo desplazarse hacia abajo</title> <style> .div2{width:100px;height:100px;border:1px solid red }*{margen:0}.botón1:activo{ fondo:rojo}cuerpo{alto:375px;ancho:667px;borde:1px sólido rojo}.div1{alto:600px;ancho:100%;fondo:rojo}.div2{alto:600px;ancho:100%;fondo:verde}.div3{alto:600px;ancho:100%;fondo:azul} .div4{alto:600px;ancho:100%;fondo:amarillo} </estilo> </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(){ //Obtener el elemento principal del contenedor var div0 = document.getElementsByClassName('div0') [0]; //altura La altura del atributo calculado var height = parseInt((window.getComputedStyle(div0, null).height).replace('px', '')); function(){/*scrollTop es la distancia entre la parte superior de la barra de desplazamiento y la esquina superior derecha de la interfaz. Aquí se utiliza el método de escritura de compatibilidad*/let scrollTop = document.documentElement &&. document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; //+-5 es para garantizar un cierto grado de flexibilidad, no tiene que ser exactamente igual, if(height-5<=scrollTop+ clientHeight&&scrollTop+clientHeight< =height+5){ console.log('Escucha exitosa', 'Llegó al final') } } } </script></html> Explicación relevante del código: muchas veces, cuando se carga la lista, no podemos establecer la altura del contenedor principal que carga los elementos secundarios. En este momento, cuando el estilo está configurado en automático, element.style.height también será igual a. auto Se recomienda utilizar clientHeight o utilizar el estilo de cálculo getComputedStyle calcula la altura.
Resumir
Lo anterior es lo que le presenta el editor para resolver el problema del desplazamiento al evento inferior en HTML5. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá. tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!
Si cree que este artículo le resulta útil, puede reimprimirlo. Indique la fuente, ¡gracias!