Using css to achieve chat window, how to make the window slide to the latest one?

implement a conversation window with css. The problem is that constantly sending messages the latest messages exceed the fixed height. Is there any way to automatically slide up the latest news, similar to Wechat"s chat window 

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

warp is my window box height fixed; content is the content box height as the content expands, warp sets overflow:auto but the height of content exceeds warp can not display the last message. I keep changing the translateY value of content to scroll, but there is a drawback: the content is not fully displayed, because translate only translates the content, not the box. Is there a big boss? is there a solution? Thank you very much

Css javascript
Dec.22,2021

Let's get to know this:

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

Scroll to the end 

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

scrollToEnd('warp')//warp id

read more documents
https://developers.weixin.qq.

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

Previous: About the use of svn;

Next: Does the vue encapsulate the fallback function to report an error?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu