实现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 document.createDocumentFragment()
Apr 04 Javascript
js对象的构造和继承实现代码
Dec 05 Javascript
JS判定是否原生方法
Jul 22 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
JS实现吸顶特效
Jan 08 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
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
php验证码生成器
2017/05/24 PHP
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
在Python中marshal对象序列化的相关知识
2015/07/01 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
django+mysql的使用示例
2018/11/23 Python
Python实战购物车项目的实现参考
2019/02/20 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
python不同系统中打开方法
2020/06/23 Python
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
学生生病请假条范文
2014/02/16 职场文书
自我鉴定总结
2014/03/24 职场文书
党支部意见范文
2015/06/02 职场文书
Golang连接并操作MySQL
2022/04/14 MySQL
Tomcat弱口令复现及利用
2022/05/06 Servers