实现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 substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
js实现简单模态框实例
Nov 16 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 Javascript
Vue 技巧之控制父类的 slot
Feb 24 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
PR值查询 | PageRank 查询
2006/12/20 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
PHP echo()函数讲解
2019/02/15 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
动态控制Table的js代码
2007/03/07 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
jquery 手势密码插件
2017/03/17 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python常用模块用法分析
2014/09/08 Python
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
大学运动会通讯稿
2014/01/28 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
2015年入党决心书
2015/02/05 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
MySQL系列之六 用户与授权
2021/07/02 MySQL
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL
JavaScript实现音乐播放器
2022/08/14 Javascript