实现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获得网页背景色和字体色的方法
Mar 21 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
vue3中的组件间通信
Mar 31 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 mcrypt可逆加密算法分析
2011/07/19 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
php实现简单四则运算器
2020/11/29 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
vue.js的安装方法
2017/05/12 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
python 查找文件名包含指定字符串的方法
2018/06/05 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
Python通过Pillow实现图片对比
2020/04/29 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
Delphi笔试题
2016/11/14 面试题
财务工作者先进事迹材料
2014/01/17 职场文书
太太口服液广告词
2014/03/20 职场文书
厨房管理计划书
2014/04/27 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
高中班主任寄语
2019/06/21 职场文书