用css实现聊天窗口，怎样让窗口滑到最新一条？

Question

用css实现一个对话窗口，问题在于不断发送信息 最新的消息就超出固定高度了。有什么方法可以让最新消息自动上滑，类似微信的聊天窗口

    <div class="warp">
        <div class="content"></div>
    </div>

warp是我的窗口盒子高度固定；content是内容盒子高度随内容扩大，warp设置了overflow：auto但是content的高度超过warp不能将最后一条消息显示出来。我是不断改变content的translateY值来做到滚动的，但是这样有个缺陷：内容展示不全，因为translate只会平移内容不会平移盒子。有大佬有解决办法吗？感激不尽

Answer 1

老铁了解下 :

Element.scrollIntoView() - Web API 接口 | MDN
https://developer.mozilla.org...

Answer 2

滚动到底

function scrollToEnd(id){
  var el = document.getElementById(id);
  el.scrollTop=el.scrollHeight;
}

scrollToEnd('warp')//warp 为id

Answer 3

多看文档
https://developers.weixin.qq....

wx.pageScrollTo({
  scrollTop: 0,
  duration: 300
})

Answer 4