實(shí)現(xiàn)div滾動(dòng)條默認(rèn)最底部以及默認(rèn)最右邊的示例代碼
有個(gè)需求,要在顯示聊天框時(shí),固定框的大小為300px高度,寬度50px左右,然后當(dāng)聊天內(nèi)容超出寬度或者高度時(shí)會(huì)出現(xiàn)滾動(dòng)條,并且垂直滾動(dòng)條要默認(rèn)最底部,以便顯示最新消息,水平滾動(dòng)條一般都是默認(rèn)最左,這里列出默認(rèn)最底部以及默認(rèn)最右邊的方法的代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>實(shí)現(xiàn)div滾動(dòng)條默認(rèn)最底部以及默認(rèn)最右邊</title> <script type="text/javascript" src="jquery文件地址"></script> <script type="text/javascript"> $(document).ready(function(){ $('#scroll_div').scrollTop( $('#scroll_div')[0].scrollHeight); $('#scroll_div').scrollLeft( $('#scroll_div')[0].scrollWidth); }); </script> <body> <div id="scroll_div" style="overflow-y:scroll; overflow-x:scroll;width:50px; height:300px; border:1px solid #F00;"> DIVCSS5測(cè)試內(nèi)容,歡迎來(lái)到DIVCSS5學(xué)習(xí)DIV+CSS技術(shù)。大家可以通過(guò)DIVCSS5主站上的所有免費(fèi)CSS教程足可學(xué)會(huì)DIV CSS技術(shù) -如果需要深入系統(tǒng)學(xué)習(xí)、較短時(shí)間達(dá)到理想學(xué)習(xí)效果可參加DIV+CSS培訓(xùn)班學(xué)習(xí)。 </div> </body> </html>
以上這篇實(shí)現(xiàn)div滾動(dòng)條默認(rèn)最底部以及默認(rèn)最右邊的示例代碼就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 判斷div滑動(dòng)到底部的scroll實(shí)例代碼
- 讓DIV的滾動(dòng)條自動(dòng)滾動(dòng)到最底部的3種方法(推薦)
- 用js控件div的滾動(dòng)條,讓它在內(nèi)容更新時(shí)自動(dòng)滾到底部的實(shí)現(xiàn)方法
- jQuery實(shí)現(xiàn)將div中滾動(dòng)條滾動(dòng)到指定位置的方法
- JS實(shí)現(xiàn)判斷滾動(dòng)條滾到頁(yè)面底部并執(zhí)行事件的方法
- Javascript實(shí)現(xiàn)DIV滾動(dòng)自動(dòng)滾動(dòng)到底部的代碼
- 實(shí)現(xiàn)div內(nèi)部滾動(dòng)條滾動(dòng)到底部和頂部的代碼
相關(guān)文章
JavaScript利用canvas實(shí)現(xiàn)鼠標(biāo)跟隨特效
canvas是一個(gè)很神奇的玩意兒,比如畫(huà)表格、畫(huà)海報(bào)圖都要用canvas去做。本文就來(lái)利用canvas制作個(gè)簡(jiǎn)單的鼠標(biāo)跟隨特效,快跟隨小編一起學(xué)習(xí)一下吧2022-10-10Bootstrap 模態(tài)框多次顯示后臺(tái)提交多次BUG的解決方法
本篇文章主要介紹了Bootstrap 模態(tài)框多次顯示后臺(tái)提交多次BUG的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12純JavaScript實(shí)現(xiàn)實(shí)時(shí)反饋系統(tǒng)時(shí)間
這篇文章主要介紹了純JavaScript實(shí)現(xiàn)實(shí)時(shí)反饋系統(tǒng)時(shí)間的相關(guān)資料,需要的朋友可以參考下2017-10-10淺析如何在Bash中調(diào)用Node運(yùn)行JS文件進(jìn)行數(shù)據(jù)通信
這篇文章主要來(lái)和大家探討在 Bash 中調(diào)用 Node 運(yùn)行 JS 文件時(shí)如何進(jìn)行數(shù)據(jù)通信,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03Javascript Ajax異步讀取RSS文檔具體實(shí)現(xiàn)
這篇文章主要介紹了Javascript Ajax異步讀取RSS文檔具體實(shí)現(xiàn),有需要的朋友可以參考一下2013-12-12HTML頁(yè)面登錄時(shí)的JS驗(yàn)證方法
這篇文章主要介紹了HTML界面登錄時(shí)的JS驗(yàn)證方法,需要的朋友可以參考下2014-05-05