如何在调整大小时更改滚动元素行为？ (HTML,CSS,JavaScript)

概述参见英文答案 > Scrollable div to stick to bottom, when outer div changes in size                                    5个 目前,如果我的网页上的滚动div垂直缩小,则内容保持固定在div的顶部,并且之前位于div底部的内容将被隐藏. 我希望这在相反的方向上工作：当div调整大小时,内容保持固定到 参见英文答案 > Scrollable div to stick to bottom,when outer div changes in size5个
目前,如果我的网页上的滚动div垂直缩小,则内容保持固定在div的顶部,并且之前位于div底部的内容将被隐藏.

我希望这在相反的方向上工作：当div调整大小时,内容保持固定到底部边框,先前在顶部的内容折叠.

可以把它想象成手机上的典型信使应用程序.当您输入文本并且输入框的大小增加时,它会使显示先前消息的区域变小,但是当发生这种情况时,内容将固定为底部边框.

如何在HTML / CSS / JavaScript中实现此目的？

解决方法 这可以使用CSS完成,正如我在 this answer中所展示的那样.

这是实现它的代码部分.

HTML,body { height:100%; margin:0; padding:0; }.chat-window{  display:flex;  flex-direction:column;  height:100%;}.chat-messages{  flex: 1;  height:100%;  overflow: auto;  display: flex;  flex-direction: column-reverse;}/* begin - fix for hIDden scrollbar in IE/Edge/firefox */.chat-messages-text{ overflow: auto; }@media screen and (-webkit-min-device-pixel-ratio:0) {  .chat-messages-text{ overflow: visible; }  /*  reset Edge as it IDentifIEs itself as webkit  */  @supports (-ms-accelerator:true) { .chat-messages-text{ overflow: auto; } }}

<div >  <div >    <div  ID="messages">      Long long content 1!<br/>      Long long content 2!<br/>      Long long content 3!<br/>      Long long content 4!<br/>      Long long content 5!<br/>      Long long content 1!<br/>      Long long content 2!<br/>      Long long content 3!<br/>      Long long content 4!<br/>      Long long content 5!<br/>      Long long content 1!<br/>      Long long content 2!<br/>      Long long content 3!<br/>      Long long content 4!<br/>      Long long content 5!<br/>      Long long content 1!<br/>      Long long content 2!<br/>      Long long content 3!<br/>      Long long content 4!<br/>      Long long content 5!<br/>      Long long content 1!<br/>      Long long content 2!<br/>      Long long content 3!<br/>      Long long content 4!<br/>      Long long content 5!<br/>    </div>  </div></div>

总结

以上是内存溢出为你收集整理的如何在调整大小时更改滚动元素行为？ (HTML,CSS,JavaScript)全部内容，希望文章能够帮你解决如何在调整大小时更改滚动元素行为？ (HTML,CSS,JavaScript)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。