您好,登錄后才能下訂單哦!
這篇文章主要介紹web開(kāi)發(fā)中如何實(shí)現(xiàn)滾動(dòng)條的監(jiān)聽(tīng)與內(nèi)容隨著滾動(dòng)條動(dòng)態(tài)加載,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
實(shí)例如下:
<!DOCTYPE html> <html> <head> <title>當(dāng)滾動(dòng)條滑到底部時(shí)自動(dòng)加載內(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)頁(yè)原有內(nèi)容添加一份,這個(gè)大家可以寫(xiě)自己要加載的內(nèi)容或指令 function addLi(){ document.getElementById("img").innerHTML+=content; } /* * 監(jiān)聽(tīng)滾動(dòng)條,本來(lái)不想用jQuery但是發(fā)現(xiàn)js里面監(jiān)聽(tīng)滾動(dòng)條的事件不好添加,這邊就引用了Jquery的$(obj).scroll();這個(gè)方法了 */ $(window).scroll(function(){ //下面這句主要是獲取網(wǎng)頁(yè)的總高度,主要是考慮兼容性所以把Ie支持的documentElement也寫(xiě)了,這個(gè)方法至少支持IE8 var htmlHeight=document.body.scrollHeight||document.documentElement.scrollHeight; //clientHeight是網(wǎng)頁(yè)在瀏覽器中的可視高度, var clientHeight=document.body.clientHeight||document.documentElement.clientHeight; //scrollTop是瀏覽器滾動(dòng)條的top位置, var scrollTop=document.body.scrollTop||document.documentElement.scrollTop; //通過(guò)判斷滾動(dòng)條的top位置與可視網(wǎng)頁(yè)之和與整個(gè)網(wǎng)頁(yè)的高度是否相等來(lái)決定是否加載內(nèi)容; if(scrollTop+clientHeight==htmlHeight){ addLi(); } }) </script> </body> </html>
以上是“web開(kāi)發(fā)中如何實(shí)現(xiàn)滾動(dòng)條的監(jiān)聽(tīng)與內(nèi)容隨著滾動(dòng)條動(dòng)態(tài)加載”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。