js如何實現將滾動條處於最下端
現在就以div作為例子,當div的內容超出尺寸時,一般要設定一個滾動條,這樣拖動滾動條就可以檢視全部內容了,但是如果我們動態的像div中新增內容的時候,滾動條始終處於最上端,新增加的內容被隱藏了,下面介紹一下如何解決此問題。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box { height:300px; width:500px; background-color:red; overflow:scroll; } #inner { width:200px; height:400px; margin:0px auto; background-color:blue; } </style> <script type="text/javascript"> window.onload=function() { var box=document.getElementById("box"); var newDiv=document.createElement("div"); newDiv.style.width="200px"; newDiv.style.height="100px"; newDiv.style.backgroundColor="green"; box.appendChild(newDiv); box.scrollTop = box.scrollHeight; } </script> </head> <body> <div id="box"> <div id="inner"></div> </div> </body> </html>
以上程式碼實現了我們的要求,滾動條始終處於最下端。
相關閱讀:
1.createElement()函式可以參閱js createElement()一章節。
2.scrollTop()函式可以參閱js scrollTop用法一章節。
3.scrollHeight可以參閱scrollHeight屬性一章節。
相關文章
- selenium中JS如何處理滾動條JS
- Ext實現滾動條一直處於底部的方法
- js實現的模擬滾動條效果JS
- css實現隱藏滾動條CSS
- js實現 web頁面的滾動條下拉時載入更多JSWeb
- jQuery如何判斷滾動條到達最頂端jQuery
- css實現隱藏滾動條並可以滾動內容CSS
- Delphi中TFlowPanel實現滾動條效果
- ListView自動滾到最後一條View
- 兩種方式實現橫向滾動條
- js實現重新整理頁面依然能夠使滾動條滾定在原來位置JS
- 原生JS控制多個滾動條同步跟隨滾動JS
- 使用js控制滾動條的位置JS
- 實現隨著滾動條滾動,導航會自動切換的效果
- css實現修改預設滾動條樣式CSS
- jQuery實現的設定滾動條的位置jQuery
- 3種方法實現CSS隱藏滾動條並可以滾動內容CSS
- Vue.js 桌面端自定義滾動條元件|vue美化滾動條VScrollVue.js元件
- 拖動滾動條實現側欄導航定位效果
- 拖動滾動條實現內容自動載入效果
- win10系統iframe滾動條閃動怎麼處理_win10系統iframe滾動條閃動如何修復Win10
- Vue.js+cube-ui(Scroll元件)實現類似頭條效果的橫向滾動導航條Vue.jsUI元件
- 【Flutter實戰】自定義滾動條Flutter
- Vue完美記住滾動條和實現下拉載入Vue
- javascript模擬實現滾動條效果程式碼例項JavaScript
- js實現圖片上下滾動background-positionJS
- 拖動滾動條實現div跟隨效果程式碼例項
- 用css實現thead隨著滑動條滾動的tableCSS
- 移動端無限滾動載入 js實現原理JS
- js滑鼠移動實現圖片立體滾動效果JS
- div滾動條樣式,水平滾動
- 隱藏滾動條保留滾動效果
- 安卓中如何實現無限滾動列表安卓
- vue 自定義指令實現,滾動條百分比進度條。Vue
- js獲取滾動條高度例項程式碼JS
- 原生JS利用transform實現banner的無限滾動JSORM
- js實現的文字垂直滾動例項程式碼JS
- chrome,firfox,IE實現隱藏滾動條但是可以正常滾動(瀏覽器自帶隱藏屬性實現)Chrome瀏覽器