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

devtools/2024/9/23 11:57:27/

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

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

这是效果


http://www.ppmy.cn/devtools/39954.html

相关文章

【图像畸变校正】

接上篇文章&#xff1a;【鱼眼&#xff0b;普通相机】相机标定 附代码&#xff1a; 方法一&#xff1a; 使用cv2.undistort """Create May 11, 2024author Wang Jiajun """import cv2 import numpy as npdef correct(img,camera_fileE:/cali…

第二证券今日投资参考:银保渠道合作限制松绑 低空旅游借势起飞

昨日&#xff0c;两市股指盘中震动上扬&#xff0c;沪指一度涨近1%续创年内新高&#xff0c;创业板指一度涨超2%。到收盘&#xff0c;沪指涨0.83%报3154.32点&#xff0c;深证成指涨1.55%报9788.07点&#xff0c;创业板指涨1.87%报1900.01点&#xff0c;科创50指数涨2.26%&…

React Native vs Flutter:2023年移动开发框架对比

React Native 和 Flutter 都是当前流行的跨平台移动应用开发框架&#xff0c;它们使开发者能够使用一套代码库开发同时运行在Android和iOS上的应用。尽管它们的目标相似&#xff0c;但这两个框架在设计理念、性能、生态系统和开发体验等方面有着明显的不同。以下是2023年React …

Spring Boot进阶 - Starter自定义

在Spring Boot中,自定义starter是一种高级用法,它允许你封装特定功能或组件,使得其他开发者能够轻松地在他们的Spring Boot应用中引入和配置这些功能,而无需关注其实现细节。自定义starter本质上是一个jar包,它集合了自动配置、依赖管理和可选的模板代码,以简化集成过程。…

性能优化学习

一、明确优化目标 提升吞吐量还是相应速度。 二、性能优化的指标 1&#xff09; 平均响应时间 服务接口的平均处理能力。 向某个网站发送n次请求&#xff0c;n次请求相应时间除以n得到的时间。 短时间请求慢&#xff0c;然后又变好&#xff0c;平均响应时…

AI工具的热门与卓越:揭示AI技术的实际应用和影响

文章目录 每日一句正能量前言常用AI工具创新AI应用个人体验分享后记 每日一句正能量 我们在我们的劳动过程中学习思考&#xff0c;劳动的结果&#xff0c;我们认识了世界的奥妙&#xff0c;于是我们就真正来改变生活了。 前言 随着人工智能&#xff08;AI&#xff09;技术的快…

leetcode206-Reverse Linked List

题目 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1] 分析 用一个指针记录当前位置&#xff0c;另外一个指针记录当前位置的前一个位置&#xff0c…

Django性能之道:缓存应用与优化实战

title: Django性能之道&#xff1a;缓存应用与优化实战 date: 2024/5/11 18:34:22 updated: 2024/5/11 18:34:22 categories: 后端开发 tags: 缓存系统Redis优点Memcached优缺点Django缓存数据库优化性能监控安全实践 引言 在当今的互联网时代&#xff0c;用户对网站和应用…