实现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学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
Vue中rem与postcss-pxtorem的应用详解
Nov 20 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 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
日期 时间js控件
2009/05/07 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
Python操作串口的方法
2015/06/17 Python
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
使用django实现一个代码发布系统
2019/07/18 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
python 的topk算法实例
2020/04/02 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
Python实现数字的格式化输出
2020/08/01 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
食品行业求职人的自我评价
2014/01/19 职场文书
护士实习求职信
2014/06/22 职场文书
人事专员岗位说明书
2014/07/29 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript