Monitoring of scroll bar and dynamic loading of content with scroll bar
- 2021-07-16 01:51:49
- OfStack
Examples are as follows:
<!DOCTYPE html>
<html>
<head>
<title> Automatically loads content when the scroll bar slides to the bottom </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css">
body{
background-color: #808080;
}
#main{
margin:0 auto;
width: 960px;
}
#content{
position: absolute;
width: 960px;
}
#img{
margin: 0;
padding: 0;
}
#img li{
list-style-type: none;
background-color: salmon;
margin: 0;
margin-top:10px;
border-bottom: solid 1px hotpink;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div id="content">
<ul id="img">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
// Get the original contents of the list
var content=document.getElementById("img").innerHTML;
// Every time it is called 1 Second, add the original content of the webpage 1 You can write your own content or instructions to load
function addLi(){
document.getElementById("img").innerHTML+=content;
}
/*
* Monitor the scroll bar, I didn't want to use it jQuery But it was discovered that js It is difficult to add the event of monitoring scroll bar inside, so it is quoted here Jquery Adj. $(obj).scroll(); This method
*/
$(window).scroll(function(){
// The following sentence is mainly to obtain the total height of the web page, mainly considering compatibility, so put Ie Supported documentElement Also wrote that this method at least supports IE8
var htmlHeight=document.body.scrollHeight||document.documentElement.scrollHeight;
//clientHeight Is the visual height of the web page in the browser,
var clientHeight=document.body.clientHeight||document.documentElement.clientHeight;
//scrollTop Is the browser scroll bar top Location,
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
// By judging the scroll bar's top Whether the sum of the location and the visual web page is equal to the height of the whole web page determines whether to load the content or not;
if(scrollTop+clientHeight==htmlHeight){
addLi();
}
})
</script>
</body>
</html>
The above method Ie8 is basically compatible with some mainstream browsers, so you can try it ~ ~