질문: H5에는 다음과 같은 요구 사항이 있습니다. 예를 들어 목록이 있는 경우 아래쪽으로 스크롤할 때 더 많은 것을 로드해야 합니다.
해결책: 처리를 위해 창의 스크롤 이벤트를 사용할 수 있습니다.
분석: 스크롤이 전체 화면에 대한 것이라면(특정 인터페이스 블록에 대한 것이 아님) 다음이 true여야 합니다. 화면 높이 + 최대 스크롤 거리 = 콘텐츠 높이
코드 구현:
<html> <head> <meta charset=UTF-8> <title>아래로 스크롤하려면 듣기</title> <style> .div2{width:100px;height:100px;border:1px 단색 빨간색 }*{margin :0}.button1:active{ background:red}body{height:375px;width:667px;border:1px solid 빨간색}.div1{높이:600px;너비:100%;배경:빨간색}.div2{높이:600px;너비:100%;배경:녹색}.div3{높이:600px;너비:100%;배경:파란색} .div4{높이:600px;너비:100%;배경:노란색} </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(){ //컨테이너 상위 요소 가져오기 var div0 = document.getElementsByClassName('div0') [ 0] //높이 계산된 속성의 높이 var height = parsInt((window.getCompulatedStyle(div0, null).height).replace('px', '')); console.log(height, 계산된 div0 높이) window.onscroll = function( ){/*scrollTop은 스크롤 막대 상단과 인터페이스 오른쪽 상단 사이의 거리입니다. 여기서는 호환성 작성 방법이 사용됩니다.*/let scrollTop = document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; //+-5는 어느 정도의 유연성을 보장하기 위한 것이며 정확히 동일할 필요는 없습니다. if(height-5<=scrollTop+ clientHeight&&scrollTop+clientHeight< =height+5){ console.log('듣기 성공', '하단에 도착함') } } } </script></html> 코드 관련 설명: 목록이 로드될 때 하위 요소를 로드하는 상위 컨테이너의 높이를 설정할 수 없는 경우가 많습니다. 이때 스타일이 자동으로 설정되면 element.style.height 도 다음과 같습니다. auto clientHeight 사용하거나 계산 스타일을 사용하는 것이 좋습니다. getComputedStyle 높이를 계산합니다.
요약
위 내용은 HTML5의 하단 스크롤 이벤트 문제를 해결하기 위해 에디터가 소개하는 내용입니다. 궁금한 점이 있으시면 메시지를 남겨주시면 에디터가 시간 맞춰 답변해 드리겠습니다. . 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!
이 글이 도움이 되셨다면 재인쇄하셔도 좋고, 출처를 밝혀주시면 감사하겠습니다!