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

  • 开发
  • 36

常见的定位到聊天最新位置一般是，正常渲染之后，使用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>

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

这是效果

阅读全部

相关推荐

  2. 前端怎么定位到发生错误的元素

    2024-05-12 01:30:08       51 阅读

  4. 34.在排序数组中查找元素的第一个和最后一个位置

    2024-05-12 01:30:08       67 阅读

  5. LeetCode双指针：在排序数组中查找元素的第一个和最后一个位置

    2024-05-12 01:30:08       61 阅读

  9. 力扣-34. 在排序数组中查找元素的第一个和最后一个位置

    2024-05-12 01:30:08       57 阅读

  10. LeetCode 34 在排序数组中查找元素的第一个和最后一个位置

    2024-05-12 01:30:08       60 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-12 01:30:08       98 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-12 01:30:08       106 阅读

  9. 在Django里面运行非项目文件

    2024-05-12 01:30:08       87 阅读

  19. Python语言-面向对象

    2024-05-12 01:30:08       96 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-05-12 01:30:08       91 阅读

热门阅读

  3. Day_1

    Day_1

    2024-05-12 01:30:08      29 阅读

  4. RockChip Uboot/Kernel开机LOGO和Android开机动画

    2024-05-12 01:30:08       39 阅读

  6. Python3 笔记：位运算符

    2024-05-12 01:30:08       35 阅读

  7. P1164 小A点菜

    2024-05-12 01:30:08       30 阅读

  10. 【Python 常用脚本及命令系列 1.2 -- python 判断串口是否已经打开】

    2024-05-12 01:30:08       25 阅读

  14. 设计模式——命令模式（Command）

    2024-05-12 01:30:08       37 阅读

  18. 软件测试概述

    2024-05-12 01:30:08       37 阅读

  19. Spring aop切面编程

    2024-05-12 01:30:08       32 阅读

  21. Spring中的DigestUtils：数据摘要的艺术与实用

    2024-05-12 01:30:08       35 阅读

  27. 简站WordPress主题

    2024-05-12 01:30:08       39 阅读

  28. 跨境电商独立站建站和外贸建站有什么相同与不同的

    2024-05-12 01:30:08       43 阅读