实现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 设置文本框中焦点的位置
Nov 20 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
React组件refs的使用详解
Feb 09 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
javascript对象3个属性特征
Nov 17 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获取当前url路径的函数以及服务器变量
2013/06/29 PHP
php向js函数传参的几种方法
2014/08/10 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
python 排序算法总结及实例详解
2016/09/28 Python
ansible作为python模块库使用的方法实例
2017/01/17 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
个人简历中的自我评价怎么写
2014/01/26 职场文书
四议两公开实施方案
2014/03/28 职场文书
房屋出售协议书
2014/04/10 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
单位收入证明范本
2015/06/18 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python