Pergunta: No H5, temos esse requisito: por exemplo, quando há uma lista, mais precisa ser carregado ao rolar para baixo.
Solução: Você pode usar o evento scroll da janela para processar
Análise: Se a rolagem for para a tela inteira (não para um determinado bloco de interface), então isso deve ser verdade: altura da tela + distância máxima de rolagem = altura do conteúdo
Implementação de código:
<html> <head> <meta charset=UTF-8> <title>Ouça rolar para baixo, rolar para baixo</title> <style> .div2{largura:100px;altura:100px;borda:1px vermelho sólido }*{margem:0}.button1:ativo{fundo:vermelho}corpo{altura:375px;largura:667px;borda:1px sólido vermelho}.div1{altura:600px;largura:100%;fundo:vermelho}.div2{altura:600px;largura:100%;fundo:verde}.div3{altura:600px;largura:100%;fundo:azul} .div4{altura:600px;largura:100%;fundo:amarelo} </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(){ //Obtém o elemento pai do contêiner var div0 = document.getElementsByClassName('div0') [0]; //altura A altura do atributo calculado var height = parseInt((window.getComputedStyle(div0, null).height).replace('px', '')); function(){/*scrollTop é a distância entre o topo da barra de rolagem e o canto superior direito da interface. O método de escrita de compatibilidade é usado aqui*/let scrollTop = document.documentElement &&. document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; //+-5 é para garantir um certo grau de flexibilidade, não precisa ser exatamente igual, if(height-5<=scrollTop+ clientHeight&&scrollTop+clientHeight< =height+5){ console.log('Ouvindo com sucesso', 'Chegou na parte inferior') } } } </script></html> Explicação relevante do código: Muitas vezes, quando a lista é carregada, não podemos definir a altura do contêiner pai que carrega os elementos filhos. Neste momento, quando o estilo é definido como automático, element.style.height também será igual a. auto. Recomenda-se usar clientHeight ou usar o estilo de cálculo getComputedStyle para calcular a altura.
Resumir
O texto acima é o que o editor apresenta a você para resolver o problema de rolar até o evento inferior no HTML5. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a você. tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!
Se você acha que este artigo é útil para você, fique à vontade para reimprimi-lo, indique a fonte, obrigado!