js 默认滚动到最底部

首先，想要默认滚动到最底部，思路是：

判断页面/元素是否出现了滚动条 —— 判断方法是：页面/元素高度有没有超过滚动高度若有滚动条即把滚动条滚动到最底部

现在我们来了解几个dom属性: scrollTop:获取或设置一个元素的内容垂直滚动的像素数，当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0 scrollHeight:这是一个只读属性，是元素内容高度的度量，包括由于溢出导致的视图中不可见的内容。注意：scrollHeight在没有滚动条的情况下，它的值跟下面要介绍的clientHeight相同。scrollHeight包括元素的padding，但不包括元素的border和margin clientHeight:也是一个只读属性，返回元素内部的高度，包括padding，但不包括border跟margin 清楚这几个属性之后我们就可以知道要怎么完成以上思路了

var ele = document.getElementById("test"); //判断元素是否出现了滚动条 if(ele.scrollHeight > ele.clientHeight) { //设置滚动条到最底部 ele.scrollTop = ele.scrollHeight; }

在我应用这段代码是由于我是要在动态数据渲染完成后再默认显示最低部，中间渲染时间差会导致错误的滚动距离。 于是我使用了延迟进行设置，如下：

if(ele.scrollHeight > ele.clientHeight) { setTimeout(function(){ //设置滚动条到最底部 ele.scrollTop = ele.scrollHeight; },500); }

设置好后由于是过了500毫秒才执行的滚动到底部，这样就不是默认滚动的效果了，于是我在一开始的时候把元素透明度设置成透明，当滚动完毕再把它设置成可见，这样可以让用户看到是一开始默认是底部的效果 css:#test {opacity:0}

if(ele.scrollHeight > ele.clientHeight) { setTimeout(function(){ //设置滚动条到最底部 ele.scrollTop = ele.scrollHeight; ele.style.opacity = 1; },500); }

网上还有一种使用css3的felx做的效果：

display: flex; flex-flow: column-reverse; align-items: baseline;

因为在我的项目中并不适用，我做的是类似于微信聊天界面效果，当没有滚动条时不需要设置，而如果使用这个是始终显示在最底部