实现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 相关文章推荐
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 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
php对gzip文件或者字符串解压实例参考
2008/07/25 PHP
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
python带参数打包exe及调用方式
2019/12/21 Python
在python中使用nohup命令说明
2020/04/16 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
pandas 数据类型转换的实现
2020/12/29 Python
用Python制作音乐海报
2021/01/26 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
计算机专业毕业生推荐信
2013/11/25 职场文书
医院护士的求职信
2014/01/03 职场文书
2014政务公开实施方案
2014/02/19 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
工程部岗位职责范本
2015/04/11 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
九年级化学教学反思
2016/02/22 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB
Go gorilla/sessions库安装使用
2022/08/14 Golang