编程 Javascript

实现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滚动条默认最底部以及默认最右边的示例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

- Author -

qq_27511945

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery控制listbox中项的移动并排序的实现代码

Sep 28 Javascript

js 遍历对象的属性的代码

Dec 29 Javascript

jQuery.query.js 取参数的两点问题分析

Aug 06 Javascript

jquery获取div距离窗口和父级dv的距离示例

Oct 10 Javascript

浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题

Jun 11 Javascript

javascript实现根据3原色制作颜色选择器的方法

Jul 17 Javascript

Angular中使用ui router实现系统权限控制及开发遇到问题

Sep 23 Javascript

聊一聊JS中的prototype

Sep 29 Javascript

jquery 实现轮播图详解及实例代码

Oct 12 Javascript

Boostrap栅格系统与自己额外定义的媒体查询的冲突问题

Feb 19 Javascript

在微信小程序中使用vant的方法

Jun 07 Javascript

详解vue-router的导航钩子(导航守卫)

Nov 02 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计算2个日期的差值函数分享

2015/02/02 PHP

Zend Framework实现Zend_View集成Smarty模板系统的方法

2016/03/05 PHP

js调用打印机打印网页字体总是缩小一号的解决方法

2014/01/24 Javascript

手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)

2014/06/06 Javascript

js实现鼠标感应向下滑动隐藏菜单的方法

2015/02/20 Javascript

微信小程序在Chrome浏览器上运行以及WebStorm的使用

2016/09/27 Javascript

关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库

2016/11/30 Javascript

canvas实现钟表效果

2017/02/13 Javascript

React全家桶环境搭建过程详解

2018/05/18 Javascript

详解Vue项目引入CreateJS的方法（亲测可用）

2019/05/30 Javascript

JavaScript Event Loop相关原理解析

2020/06/10 Javascript

Antd-vue Table组件添加Click事件,实现点击某行数据教程

2020/11/17 Javascript

Python重新引入被覆盖的自带function

2014/07/16 Python

Python中input和raw_input的一点区别

2014/10/21 Python

Django与JS交互的示例代码

2017/08/23 Python

通过Python实现自动填写调查问卷

2017/09/06 Python

python matplotlib 注释文本箭头简单代码示例

2018/01/08 Python

python实现图片九宫格分割

2021/03/07 Python

Python3实现zip分卷压缩过程解析

2019/10/09 Python

布隆过滤器的概述及Python实现方法

2019/12/08 Python

python3光学字符识别模块tesserocr与pytesseract的使用详解

2020/02/26 Python

Python如何合并多个字典或映射

2020/07/24 Python

django数据模型中null和blank的区别说明

2020/09/02 Python

CSS3绘制超炫的上下起伏波动进度加载动画

2016/04/21 HTML / CSS

CSS3属性 line-clamp控制文本行数的使用

2020/03/19 HTML / CSS

html5调用app分享功能示例（WebViewJavascriptBridge）

2018/03/21 HTML / CSS

英国最大的邮寄种子和植物公司：Thompson & Morgan

2017/09/21 全球购物

乡镇网格化管理实施方案

2014/03/23 职场文书

干部作风整顿自我剖析材料和整改措施

2014/09/18 职场文书

试用期转正后的自我评价

2014/09/21 职场文书

2014年政风行风自查自纠报告

2014/10/21 职场文书

作风建设年活动实施方案

2014/10/24 职场文书

消费者理赔投诉书

2015/07/02 职场文书

2016年度农村党员干部主题教育活动总结

2016/04/06 职场文书

导游词之四川熊猫基地

2020/01/13 职场文书

Python torch.flatten()函数案例详解

2021/08/30 Python