标签：滚动 元素 ele 滚动条 scrollTop JS scrollHeight
为了学习JS的滚动事件，我们先来认识dom的几个属性
1. scrollTop
获取或设置一个元素的内容垂直滚动的像素数，当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0
2. scrollHeight
scrollHeight（内容的实际高度+上下padding<如果没有限制div的height，即height是自适应的，那么scrollHeight=clientHeight>）
3. scrollHeight
clientHeight（height+padding，不包含边框），可以理解为元素可视区域高度
如下图布局： 控制台打印结果如下：
下面简单实现一下一个小Demo（微信聊天）
var ele = document.getElementById("chatContainer");
//判断元素是否出现了滚动条
if(ele.scrollHeight > ele.clientHeight) {
// 设置一个延迟，更自然一些
setTimeout(function(){
//设置滚动条到最底部
ele.scrollTop = ele.scrollHeight;
ele.style.opacity = 1;
},500);
}
// PS：当然，大家也可以加一些css样式（如：渐变之类的），进行美化
实现思路：
- 每次增加对话框时，判断chatContainer的‘真实高度’有没有超出‘实际高度’
- 若超出就把滚动条滚动到最底部
标签：滚动,元素,ele,滚动条,scrollTop,JS,scrollHeight 来源： https://blog.csdn.net/qq_40934679/article/details/100046447
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。