Javascript實(shí)現(xiàn)DIV滾動(dòng)自動(dòng)滾動(dòng)到底部的代碼
更新時(shí)間:2012年03月01日 22:47:57 作者:
一個(gè)比較特殊的客戶要求,在一個(gè)頁(yè)面用表格顯示數(shù)據(jù),數(shù)據(jù)量不是很多,不希望使用瀏覽器的滾動(dòng)條,只能在Div中滾動(dòng)table中的數(shù)據(jù),但是有個(gè)特殊的要求,就是必須將滾動(dòng)條自動(dòng)滾動(dòng)到底部
查詢了一下相關(guān)的資料,Div沒(méi)有自動(dòng)滾動(dòng)的屬性,只能模擬鼠標(biāo)的滾動(dòng)來(lái)現(xiàn)實(shí)想要的效果。
關(guān)鍵的部分部分在這里:div.scrollTop = div.scrollHeight;
下面是具體實(shí)現(xiàn)的精簡(jiǎn)代碼:
<html>
<body>
<div id="divDetail" style="overFlow-y:scroll; width:250px;height: 200px;">
<table style="border:1px solid; ">
<tr><td>id</td><td>name</td><td>age</td><td>memo</td></tr>
<tr><td>000001</td><td>name1</td><td>24</td><td>memomemomemomemomemo</td></tr>
<tr><td>000002</td><td>name2</td><td>23</td><td>memomemomemomemomemo</td></tr>
<tr><td>000003</td><td>name3</td><td>23</td><td>memomemomemomemomemo</td></tr>
<tr><td>000004</td><td>name4</td><td>23</td><td>memomemomemomemomemo</td></tr>
<tr><td>000005</td><td>name5</td><td>23</td><td>memomemomemomemomemo</td></tr>
<tr><td>000002</td><td>name2</td><td>23</td><td>memomemomemomemomemo</td></tr>
<tr><td>000003</td><td>name3</td><td>23</td><td>memomemomemomemomemo</td></tr>
<tr><td>000004</td><td>name4</td><td>23</td><td>memomemomemomemomemo</td></tr>
<tr><td>000005</td><td>name5</td><td>23</td><td>memomemomemomemomemo</td></tr>
</table>
</div>
</body>
<script type="text/javascript" defer>
var div = document.getElementById('divDetail');
div.scrollTop = div.scrollHeight;
//alert(div.scrollTop);
</script>
</html>
其實(shí),實(shí)現(xiàn)是很簡(jiǎn)單的但是一般很少有這種需求,期間還是走了一些彎路。
關(guān)鍵的部分部分在這里:div.scrollTop = div.scrollHeight;
下面是具體實(shí)現(xiàn)的精簡(jiǎn)代碼:
復(fù)制代碼 代碼如下:
<html>
<body>
<div id="divDetail" style="overFlow-y:scroll; width:250px;height: 200px;">
<table style="border:1px solid; ">
<tr><td>id</td><td>name</td><td>age</td><td>memo</td></tr>
<tr><td>000001</td><td>name1</td><td>24</td><td>memomemomemomemomemo</td></tr>
<tr><td>000002</td><td>name2</td><td>23</td><td>memomemomemomemomemo</td></tr>
<tr><td>000003</td><td>name3</td><td>23</td><td>memomemomemomemomemo</td></tr>
<tr><td>000004</td><td>name4</td><td>23</td><td>memomemomemomemomemo</td></tr>
<tr><td>000005</td><td>name5</td><td>23</td><td>memomemomemomemomemo</td></tr>
<tr><td>000002</td><td>name2</td><td>23</td><td>memomemomemomemomemo</td></tr>
<tr><td>000003</td><td>name3</td><td>23</td><td>memomemomemomemomemo</td></tr>
<tr><td>000004</td><td>name4</td><td>23</td><td>memomemomemomemomemo</td></tr>
<tr><td>000005</td><td>name5</td><td>23</td><td>memomemomemomemomemo</td></tr>
</table>
</div>
</body>
<script type="text/javascript" defer>
var div = document.getElementById('divDetail');
div.scrollTop = div.scrollHeight;
//alert(div.scrollTop);
</script>
</html>
其實(shí),實(shí)現(xiàn)是很簡(jiǎn)單的但是一般很少有這種需求,期間還是走了一些彎路。
您可能感興趣的文章:
- 當(dāng)滾動(dòng)條滾動(dòng)到頁(yè)面底部自動(dòng)加載增加內(nèi)容的js代碼
- 基于javascript實(shí)現(xiàn)瀏覽器滾動(dòng)條快到底部時(shí)自動(dòng)加載數(shù)據(jù)
- 用js控件div的滾動(dòng)條,讓它在內(nèi)容更新時(shí)自動(dòng)滾到底部的實(shí)現(xiàn)方法
- js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)到最底部示例代碼
- JS如何設(shè)置滾動(dòng)屬性默認(rèn)自動(dòng)滾動(dòng)到底部(overflow:scroll;)
相關(guān)文章
IScroll那些事_當(dāng)內(nèi)容不足時(shí)下拉刷新的解決方法
下面小編就為大家?guī)?lái)一篇IScroll那些事_當(dāng)內(nèi)容不足時(shí)下拉刷新的解決方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07JS無(wú)限級(jí)導(dǎo)航菜單實(shí)現(xiàn)方法
今天小編就為大家分享一篇關(guān)于JS無(wú)限級(jí)導(dǎo)航菜單實(shí)現(xiàn)方法,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-01-01Echarts?3D散點(diǎn)圖實(shí)戰(zhàn)案例
這篇文章主要給大家介紹了關(guān)于Echarts?3D散點(diǎn)圖的相關(guān)資料, Echarts散點(diǎn)圖是一種常用的數(shù)據(jù)可視化圖表類型,用于展示兩個(gè)或多個(gè)維度的數(shù)據(jù)分布情況,需要的朋友可以參考下2023-11-11JavaScript JSON數(shù)據(jù)處理全集(小結(jié))
這篇文章主要介紹了JavaScript JSON數(shù)據(jù)處理全集,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08一個(gè)不錯(cuò)的應(yīng)用,用于提交獲取文章內(nèi)容,不推薦用
一個(gè)不錯(cuò)的應(yīng)用,用于提交獲取文章內(nèi)容,不推薦用...2007-03-03很酷的星級(jí)評(píng)分系統(tǒng)原生JS實(shí)現(xiàn)
這篇文章主要weidajiaxiangxi介紹了很酷的星級(jí)評(píng)分系統(tǒng)原生JS實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08判斷是否安裝flash player及當(dāng)前版本的JS代碼
本文為大家講述下如何使用jsJS判斷是否安裝flash player及版本,下面的處理代碼或許對(duì)大家有所幫助,感興趣的朋友可以參考下,希望對(duì)大家有所幫助2013-08-08