实现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得到XML某节点的子节点个数的脚本
Oct 11 Javascript
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
详解vuex的简单使用
Mar 12 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 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实现斐波那契数列的简单写法
2014/07/19 PHP
深入php内核之php in array
2015/11/10 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
python读写LMDB文件的方法
2018/07/02 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
美国精油公司:Plant Therapy
2019/05/17 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
护士的自我鉴定
2014/02/07 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
考研英语复习计划
2015/01/19 职场文书
入党介绍人意见范文
2015/06/01 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
PHP解决高并发问题
2021/04/01 PHP
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers