实现div滚动条默认最底部以及默认最右边的示例代码


Posted in Javascript onNovember 15, 2017

有个需求,要在显示聊天框时,固定框的大小为300px高度,宽度50px左右,然后当聊天内容超出宽度或者高度时会出现滚动条,并且垂直滚动条要默认最底部,以便显示最新消息,水平滚动条一般都是默认最左,这里列出默认最底部以及默认最右边的方法的代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>实现div滚动条默认最底部以及默认最右边</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测试内容,欢迎来到DIVCSS5学习DIV+CSS技术。大家可以通过DIVCSS5主站上的所有免费CSS教程足可学会DIV CSS技术 -如果需要深入系统学习、较短时间达到理想学习效果可参加DIV+CSS培训班学习。
</div>
</body> 
</html>

以上这篇实现div滚动条默认最底部以及默认最右边的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
javascript无刷新评论实现方法
May 13 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
js字符串类型String常用操作实例总结
Jul 05 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 #Javascript
Vue.js实现列表清单的操作方法
Nov 15 #Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 #Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 #Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 #Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 #Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 #Javascript
You might like
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
yii操作cookie实例简介
2014/07/09 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
PHP中文乱码解决方案
2015/03/05 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
JS调用CS里的带参方法实例
2013/08/01 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
python使用webbrowser浏览指定url的方法
2015/04/04 Python
python计算方程式根的方法
2015/05/07 Python
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
实习自我评价怎么写
2013/12/02 职场文书
缴纳养老保险的证明
2014/01/10 职场文书
产品推广策划方案
2014/05/10 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
大学学生个人总结
2015/02/15 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
python超详细实现完整学生成绩管理系统
2022/03/17 Python