实现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 相关文章推荐
通过js来制作复选框的全选和不选效果
May 22 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
javascript截取字符串小结
Apr 28 Javascript
node.js实现回调的方法示例
Mar 01 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
浅析js实现网页截图的两种方式
Nov 01 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 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函数utf8转gb2312编码
2006/12/21 PHP
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
Python使用django获取用户IP地址的方法
2015/05/11 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
bat和python批量重命名文件的实现代码
2016/05/19 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
python write无法写入文件的解决方法
2019/01/23 Python
Python列表(List)知识点总结
2019/02/18 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
美国健康和保健平台:healtop
2020/07/02 全球购物
测控技术与仪器个人求职信范文
2013/12/30 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
创建学习型党组织实施方案
2014/03/29 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
工作简报范文
2015/07/21 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
新入职员工工作总结
2015/10/15 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python