实现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参数列表集合
Apr 06 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
vue设置动态请求地址的例子
Nov 01 Javascript
我所理解的JavaScript中的this指向
Sep 04 Javascript
如何用JavaScript学习算法复杂度
Apr 30 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简单静态页生成过程
2008/03/27 PHP
使用PHP批量生成随机用户名
2008/07/10 PHP
PHP开发中常用的8个小技巧
2008/08/27 PHP
php文档更新介绍
2011/07/22 PHP
php异常处理使用示例
2014/02/25 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
vue中轮训器的使用
2019/01/27 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
javascript中layim之查找好友查找群组
2021/02/06 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
库房主管岗位职责
2013/12/31 职场文书
家具厂厂长岗位职责
2014/01/01 职场文书
财务会计专业个人求职信范本
2014/01/08 职场文书
致青春观后感
2015/06/09 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技