前端怎么让聊天列表在第一次渲染的时候自动定位到最新位置

imln

于 2024-05-10 11:22:16 发布

阅读量341

点赞数 2

文章标签：前端 css javascript

本文链接：https://blog.youkuaiyun.com/u010973051/article/details/138657762

版权

常见的定位到聊天最新位置一般是，正常渲染之后，使用scrollIntoView或者scrollTo去处理。

今天分享另外一种方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Demo</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        margin: auto;
        width: 300px;
        height: 500px;
        overflow: hidden scroll;
        /* scrollbar-width: none; */
        display: flex;
        flex-direction: column-reverse;
      }
      li {
        margin-block-end: 40px;
      }
    </style>
  </head>
  <body>
    <ul id="root"></ul>
  </body>
</html>
<script>
  const ul = document.querySelector("#root");
  for (let i = 100; i > 1; i--) {
    ul.innerHTML += `<li>${i}</li>`;
  }
</script>

代码很简单，大家一看就明白。

这是效果