滾動條的監聽 與內容隨著滾動條動態載入
阿新 • • 發佈：2018-12-29
<!DOCTYPE html> <html> <head> <title>當滾動條滑到底部時自動載入內容</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"> //獲取列表中的原有內容 var content=document.getElementById("img").innerHTML; //每被呼叫一次，就將網頁原有內容新增一份，這個大家可以寫自己要載入的內容或指令 function addLi(){ document.getElementById("img").innerHTML+=content; } /* * 監聽滾動條，本來不想用jQuery但是發現js裡面監聽滾動條的事件不好新增，這邊就引用了Jquery的$(obj).scroll();這個方法了 */ $(window).scroll(function(){ //下面這句主要是獲取網頁的總高度，主要是考慮相容性所以把Ie支援的documentElement也寫了，這個方法至少支援IE8 var htmlHeight=document.body.scrollHeight||document.documentElement.scrollHeight; //clientHeight是網頁在瀏覽器中的可視高度， var clientHeight=document.body.clientHeight||document.documentElement.clientHeight; //scrollTop是瀏覽器滾動條的top位置， var scrollTop=document.body.scrollTop||document.documentElement.scrollTop; //通過判斷滾動條的top位置與可視網頁之和與整個網頁的高度是否相等來決定是否載入內容； if(scrollTop+clientHeight==htmlHeight){ addLi(); } }) </script> </body> </html>
以上這個方法Ie8還有一些主流的瀏覽器基本都相容，大家可以嘗試下～～