<div id="box"><div>内容1</div><div>内容1</div><div>内容1</div>
</div>

要让box这个div随着里面内容的增加,滚动条一直处于最底部

css:   给div设置固定高度,并且竖向超出滚动

#box{height:200px;overflow-y:auto}

js:

var div = document.getElementById('wenti-body-div');
        div.scrollTop = div.scrollHeight;

第二种写法:

$('#wenti-body-div').scrollTop($('#wenti-body-div').height())

 // 滚动条置于底部function scroll_kefu(){// console.log($('#wenti-body-div').height())// console.log($('#kefu-body').height())$('#kefu-body').scrollTop($('#wenti-body-div').height())// // 判断内容的高度是否已经超过页面可视高度,超过则页面置于底部// if($('#wenti-body-div').height()>$('#kefu-body').height()){//     console.log('页面置于底部')//   // $('#kefu-body').scrollTop($('#wenti-body-div').height())// }else{//  console.log('页面不动')// }}

js 滚动条自动滚动到最底部相关推荐

  1. 【转载】让DIV的滚动条自动滚动到最底部的3种方法

    转载自:脚本之家  → 网络编程 → JavaScript → javascript技巧 → 让DIV的滚动条自动滚动到最底部的3种方法(推荐) http://www.jb51.net/article ...

  2. DIV滚动条自动滚动到最底部的两种方法

    查看原文 方法1 function updateScroll(){var element = document.getElementById("divId");element.sc ...

  3. html实现自动滚动,js实现滚动条自动滚动

    本文实例为大家分享了js实现滚动条自动滚动的具体代码,供大家参考,具体内容如下 效果类似于直播网站的评论,会一条接着一条向上 go out : js部分很简单:通过控制scrolltop的值来实现自动 ...

  4. JS控制滚动条的位置 JS控制TextArea滚动条自动滚动到最下部

    S控制滚动条的位置 window.scrollTo(x,y); 竖向滚动条置顶 window.scrollTo(0,0); 竖向滚动条置底 window.scrollTo(0,document.bod ...

  5. JS滚动条位置,顶部,底部,触发事件

    效果图: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...

  6. 点击li,ul滚动条自动滚动到顶部,怎么解决分享。el-tooltip的focusing不要display:none,隐藏就行

    点击li,ul滚动条自动滚动到顶部,怎么解决分享.el-tooltip的focusing不要display:none,隐藏就行

  7. vue 实现数据滚动显示_vue实现动态添加数据滚动条自动滚动到底部的示例代码...

    在使用vue实现聊天页面的时候,聊天数据动态加到页面中,需要实现滚动条也自动滚动到底部.这时我找到网上有个插件 vue-chat-scroll 但是安装后发现是用不了的,报错信息如下: VM14383 ...

  8. js实现滚动条自动滚动(scrollTop)

    效果类似于直播网站的评论,会一条接着一条向上 go out : js部分很简单:通过控制scrollTop的值来实现自动滚动效果: 很重要两点:    1.scrollTop的值不可以加单位,谨记! ...

  9. datagridview滚动条自动滚动_掘金上摸鱼的新发现,无限滚动(infinitescroll)

    前言 上班摸鱼,下班摸鱼,一直摸一直爽.在一次调试的过程中,我按下了F12刚好是掘金的页面,然后把代码输入到控制台之后,顺手滚动了几下右侧的滚动条,发现个问题如下图所示: ‍‍‍‍‍‍‍‍‍‍掘金官网 ...

最新文章

  1. 解决在VS(winform)程序中无法在调试时修改代码的问题(也就是“编辑并继续”功能无效)...
  2. Flask web开发之路四
  3. php函数的实现原理及性能分析
  4. Nagios+pnp4nagios+rrdtool 安装配置nagios(一)
  5. SAP 电商云 Spartacus 产品明细页面的 OCC API 是如何被触发的
  6. zedgraph使用中的难题
  7. mysql 多实例 独立配置文件_mysql 5.7 配置多实例 — 独立配置文件方式
  8. python sys与shutil模块
  9. LMAX Disruptor——一个高性能、低延迟且简单的框架
  10. 使用机器学习算法打造一个简单的“微博指数”
  11. 【ADRC/Matlab实现】非线性状态误差反馈NLSEF
  12. MPC-HC 播放器设置
  13. PixiJS学习(5)几何图形
  14. 安装Altera USB-Blaster驱动程序遇到的问题
  15. windows nvm安装,以及更换阿里源和用nvm安装node.js
  16. HDU-4477 Cut the rope II 递推
  17. 日本银发经济科技范儿十足
  18. 【Node.js 微信公众号实战】1.Node.js 接入微信公众平台开发
  19. 分布式定时任务调度管理系统
  20. 因子研究系列之二 -- 成长因子

热门文章

  1. 正月十五元宵节中国风海报PSD分层模板找灵感!
  2. 过年,设计师都爱的烫金红色PSD装饰素材
  3. UI\UX实用素材模板|电子商务企业设计十大趋势
  4. 了解png 格式,绝对是让你PPT设计感瞬间爆棚的大杀器
  5. UI设计实用排版法则,优秀可临摹案例,剖析设计实例
  6. UI素材干货模板|线框图wireframe线框图iOS设计稿
  7. 移动端引导页UI设计临摹模板,ui设计师进阶必备
  8. Redhat或者Centos手动安装Vim,
  9. Madagascar和MPI混合编程的Makefile文件配置
  10. 调试寄存器:Debug Register