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

Question

目前,如果我的网页上的滚动div垂直缩小,则内容保持固定在div的顶部,并且先前位于div底部的内容将被隐藏.

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

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

我怎样才能在HTML/CSS/JavaScript中实现这一目标？

Answer 1

这可以使用 CSS 来完成，正如我在这个答案中所示的那样。

这是实现它的代码部分。

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 class="chat-window">
  <div class="chat-messages">
    <div class="chat-messages-text" 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>