實例如下：
<!DOCTYPE html><html><head> <title>當滾動條滑到底部時自動加載內(nèi)容</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"> //獲取列表中的原有內(nèi)容 var content=document.getElementById("img").innerHTML; //每被調(diào)用一次，就將網(wǎng)頁原有內(nèi)容添加一份，這個大家可以寫自己要加載的內(nèi)容或指令 function addLi(){ document.getElementById("img").innerHTML+=content; } /* * 監(jiān)聽滾動條，本來不想用jQuery但是發(fā)現(xiàn)js里面監(jiān)聽滾動條的事件不好添加，這邊就引用了Jquery的$(obj).scroll();這個方法了 */ $(window).scroll(function(){ //下面這句主要是獲取網(wǎng)頁的總高度，主要是考慮兼容性所以把Ie支持的documentElement也寫了，這個方法至少支持IE8 var htmlHeight=document.body.scrollHeight||document.documentElement.scrollHeight; //clientHeight是網(wǎng)頁在瀏覽器中的可視高度， var clientHeight=document.body.clientHeight||document.documentElement.clientHeight; //scrollTop是瀏覽器滾動條的top位置， var scrollTop=document.body.scrollTop||document.documentElement.scrollTop; //通過判斷滾動條的top位置與可視網(wǎng)頁之和與整個網(wǎng)頁的高度是否相等來決定是否加載內(nèi)容； if(scrollTop+clientHeight==htmlHeight){ addLi(); } })</script></body></html>以上這個方法Ie8還有一些主流的瀏覽器基本都兼容，大家可以嘗試下～～
以上這篇滾動條的監(jiān)聽與內(nèi)容隨著滾動條動態(tài)加載的實現(xiàn)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
