實(shí)現(xiàn)div滾動(dòng)條默認(rèn)最底部以及默認(rèn)最右邊的示例代碼
更新時(shí)間：2017年11月15日 09:06:28 作者：qq_27511945
下面小編就為大家分享一篇實(shí)現(xiàn)div滾動(dòng)條默認(rèn)最底部以及默認(rèn)最右邊的示例代碼，代碼非常簡(jiǎn)潔，具有很好的參考價(jià)值，希望對(duì)大家有所幫助
有個(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中的關(guān)于類(lèi)型轉(zhuǎn)換的性能優(yōu)化
類(lèi)型轉(zhuǎn)換是大家常犯的錯(cuò)誤，因?yàn)镴avaScript是動(dòng)態(tài)類(lèi)型語(yǔ)言，你不能指定變量的類(lèi)型。2010-12-12
JavaScript校驗(yàn)Number(4,1)格式的數(shù)字實(shí)例代碼
這篇文章主要介紹了JavaScript校驗(yàn)Number(4,1)格式的數(shù)字實(shí)例代碼,本文實(shí)現(xiàn)思路明確代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
第一次接觸神奇的Bootstrap，Bootstrap提供了用戶(hù)友好、擴(kuò)瀏覽器的解決方案,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
js網(wǎng)頁(yè)中的(運(yùn)行代碼)功能實(shí)現(xiàn)思路
網(wǎng)頁(yè)中的"運(yùn)行代碼"是一個(gè)很方便的功能，可以直接看到代碼的效果，感興趣的朋友不妨參考下，或許對(duì)你學(xué)習(xí)js有所幫助，好了花不多說(shuō)切入正題2013-02-02
javascript+css實(shí)現(xiàn)單擊顏色褪去效果
javascript+css實(shí)現(xiàn)單擊顏色褪去效果...2007-08-08
基于bootstrap-datetimepicker.js不支持IE8的快速解決方法
下面小編就為大家?guī)?lái)一篇基于bootstrap-datetimepicker.js不支持IE8的快速解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
這篇文章主要介紹了javascript圖片預(yù)加載實(shí)現(xiàn)方法,以完整實(shí)例形式分析了JavaScript圖片預(yù)加載顯示的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
詳解JavaScript中的強(qiáng)制類(lèi)型轉(zhuǎn)換和自動(dòng)類(lèi)型轉(zhuǎn)換
這篇文章中我們將深入探索一下 JavaScript 中的類(lèi)型轉(zhuǎn)換,揭示強(qiáng)制類(lèi)型轉(zhuǎn)換、自動(dòng)類(lèi)型轉(zhuǎn)換和轉(zhuǎn)換函數(shù)的奧秘,快跟隨小編一起學(xué)習(xí)一下吧2023-12-12
這篇文章主要介紹了js如何實(shí)現(xiàn)input的賦值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
微信小程序中使用echarts方法(全網(wǎng)最詳細(xì)教程!)
現(xiàn)在越來(lái)越多的項(xiàng)目都在使用可視化的功能,那么使用echarts實(shí)現(xiàn)是一種不錯(cuò)的選擇,下面這篇文章主要給大家介紹了關(guān)于小程序中使用echarts的方法,本文介紹的方法應(yīng)該是全網(wǎng)最詳細(xì)教程,需要的朋友可以參考下2023-06-06