實現(xiàn)div內(nèi)部滾動條滾動到底部和頂部的代碼
更新時間:2017年11月15日 09:21:19 作者:chaofei_liang
下面筆者就為大家分享一篇實現(xiàn)div內(nèi)部滾動條滾動到底部和頂部的代碼,代碼簡潔,具有很好的參考價值,希望對大家有所幫助
實例如下所示:
<!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;//頁面可視區(qū)域的高度 if(scrollTop+divHeight>=wholeHeight){ alert('我到底部了'); } if(scrollTop==0){ alert('我到頂部了'); } } divscroll.onscroll=divScroll; </script> </body> </html>
以上這篇實現(xiàn)div內(nèi)部滾動條滾動到底部和頂部的代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
js中Math之random,round,ceil,floor的用法總結(jié)
本篇文章是對js中Math之random,round,ceil,floor的用法進(jìn)行了總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12IE8提示Invalid procedure call or argument 異常的解決方法
某臺機(jī)器上,訪問公司的好幾個產(chǎn)品網(wǎng)站,都拋出很多 Invalid procedure call or argument ,跟進(jìn)了下,情況最后簡化為2012-09-09js 時間函數(shù)應(yīng)用加、減、比較、格式轉(zhuǎn)換的示例代碼
時間函數(shù)應(yīng)用加、減、比較、格式轉(zhuǎn)換等等,具體實現(xiàn)如下,感興趣的朋友可以參考下,希望對大家有所幫助2013-08-08js prototype和__proto__的關(guān)系是什么
這篇文章主要介紹了js prototype和__proto__的關(guān)系是什么,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08javascript學(xué)習(xí)筆記--數(shù)字格式類型
很多人也許只知道 123,123.456,0xff 之類的數(shù)字格式。 其實 js 格式還有很多數(shù)字格式類型,比如 1., .1 這樣的,也有 .1e2 這樣的。2014-05-05JavaScript實現(xiàn)鼠標(biāo)控制自由移動的窗口
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)鼠標(biāo)控制自由移動的窗口,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-06-06