實例如下所示:
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .scrolldiv{ width: 500px; height: 400px; margin: 10px auto; background: #f00; overflow-y: scroll; padding: 10px; } </style></head><body><div class="scrolldiv" id="testDiv"> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><script type="text/javascript"> var divscroll=document.getElementById('testDiv'); function divScroll(){ var scrollTop=divscroll.scrollTop;//頁面上卷的高度 var wholeHeight=divscroll.scrollHeight;//頁面底部到頂部的距離 var divHeight=divscroll.clientHeight;//頁面可視區域的高度 if(scrollTop+divHeight>=wholeHeight){ alert('我到底部了'); } if(scrollTop==0){ alert('我到頂部了'); } } divscroll.onscroll=divScroll;</script></body></html>以上這篇實現div內部滾動條滾動到底部和頂部的代碼就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答