实现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有关的小细节
Apr 02 Javascript
jquery 防止表单重复提交代码
Jan 21 Javascript
js简单的表格添加行和删除行操作示例
Mar 31 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
判断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性能优化准备篇图解PEAR安装
2011/12/05 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
python通过shutil实现快速文件复制的方法
2015/03/14 Python
简单介绍Python中的readline()方法的使用
2015/05/24 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
Python3使用Matplotlib 绘制精美的数学函数图形
2019/04/11 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
python识别验证码的思路及解决方案
2020/09/13 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
函授自我鉴定
2013/11/06 职场文书
中学生评语大全
2014/04/18 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
工商局个人工作总结
2015/03/03 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
在redisCluster中模糊获取key方式
2021/07/09 Redis