Question: In H5, we have such a requirement: for example, when there is a list, more needs to be loaded when scrolling to the bottom.
Solution: You can use the window's scroll event for processing
Analysis: If scrolling is for the entire screen (not for a certain interface block), then this should be true: height of the screen + maximum scrolling distance = height of the content
Code implementation:
<html> <head> <meta charset=UTF-8> <title>Listen to scroll to the bottom scroll to the bottom</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 red}.div1{height:600px;width:100%;background:red}.div2{height:600px;width:100%;background:green}.div3{height:600px;width:100%;background:blue} .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(){ //Get the container parent element var div0 = document.getElementsByClassName('div0')[ 0]; //height The height of the calculated attribute var height = parseInt((window.getComputedStyle(div0, null).height).replace('px', '')); console.log(height, calculated height of div0) window.onscroll = function( ){/*scrollTop is the distance between the top of the scroll bar and the upper right corner of the interface. The compatibility writing method is used here*/let scrollTop = document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; //+-5 is to ensure a certain degree of flexibility, it does not have to be exactly equal, if(height-5<=scrollTop+clientHeight&&scrollTop+clientHeight< =height+5){ console.log('Listening successful', 'Arrived at the bottom') } } } </script></html> Relevant explanation of the code: Many times when the list is loaded, we cannot set the height of the parent container loading the child elements. At this time, when the style is set to auto, element.style.height will also be equal to auto. It is recommended to use clientHeight or use calculation Style getComputedStyle calculates height
Summarize
The above is what the editor introduces to you to solve the problem of scrolling to the bottom event in HTML5. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!
If you think this article is helpful to you, you are welcome to reprint it, please indicate the source, thank you!