纯CSS实现自动滚动到底部

 

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>自动滚动到底部</title><style>* {box-sizing: border-box;}body {margin: 0;height: 100vh;display: flex;flex-direction: column;}.chater {flex: 1;overflow: auto;padding: 1em;display: flex;flex-direction: column-reverse;}.msger {flex: 1;display: flex;flex-direction: column;}.msger > pre {background-color: #eee;padding: 1em;border-radius: 8px;white-space: pre-wrap;}.msger .user {align-self: flex-end;margin-left: 10vw;}.msger .ai {align-self: flex-start;margin-right: 10vw;}.sender {flex-shrink: 0;padding: 1em;}</style></head><body><div class="chater"><div class="msger"></div></div><div class="sender"><input type="text" /><button onclick="send()">发送</button></div><script>function send() {document.querySelector('.chater').scrollTop = document.querySelector('.chater').scrollHeightconst pre = document.createElement('pre')pre.className = 'user'pre.textContent = document.querySelector('input').valuedocument.querySelector('.msger').appendChild(pre)const pre2 = document.createElement('pre')pre2.className = 'ai'const timer = setInterval(() => {pre2.textContent +=String.fromCharCode(Math.floor(Math.random() * 122) + 65).repeat(Math.ceil(Math.random() * 10)) + (Math.random() < 0.2 ? '\n' : ' ')if (pre2.textContent.length > 1000) clearInterval(timer)}, 50)document.querySelector('.msger').appendChild(pre2)}</script></body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/902172.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【新人系列】Golang 入门(十五):类型断言

✍ 个人博客&#xff1a;https://blog.csdn.net/Newin2020?typeblog &#x1f4dd; 专栏地址&#xff1a;https://blog.csdn.net/newin2020/category_12898955.html &#x1f4e3; 专栏定位&#xff1a;为 0 基础刚入门 Golang 的小伙伴提供详细的讲解&#xff0c;也欢迎大佬们…

AI大模型发展现状与MCP协议诞生的技术演进

1. 大模型能力边界与用户痛点&#xff08;2023年&#xff09; 代表模型&#xff1a;GPT-4&#xff08;OpenAI&#xff09;、Claude 3&#xff08;Anthropic&#xff09;、通义千问&#xff08;阿里云&#xff09;等展现出强大的生成能力&#xff0c;但存在明显局限&#xff1a…

深入理解Linux中的线程控制:多线程编程的实战技巧

个人主页&#xff1a;chian-ocean 文章专栏-Linux 前言&#xff1a; POSIX线程&#xff08;Pthreads&#xff09; 是一种在 POSIX 标准下定义的线程库&#xff0c;它为多线程编程提供了统一的接口&#xff0c;主要用于 UNIX 和类 UNIX 系统&#xff08;如 Linux、MacOS 和 BS…

(mac)Grafana监控系统之监控Linux的Redis

Grafana安装-CSDN博客 普罗米修斯Prometheus监控安装&#xff08;mac&#xff09;-CSDN博客 1.Redis_exporter安装 直接下载 wget https://github.com/oliver006/redis_exporter/releases/download/v1.0.3/redis_exporter-v1.0.3.linux-amd64.tar.gz 解压 tar -xvf redis_…

鸿蒙应用元服务开发-Account Kit未成年人模式订阅和处理用户信息变更

一、概述 通过订阅用户信息变更&#xff0c;您可以接收有关用户及其账户的重要更新。当用户取消元服务的授权信息、注销华为账号时&#xff0c;华为账号服务器会发送通知到元服务&#xff0c;元服务可以根据通知消息进行自身业务处理。 二、用户信息变更事件介绍 三、订阅用…

buildroot构建根文件系统报错(已解决大部分问题)

title: buildroot构建根文件系统报错(set FORCE_UNSAFE_CONFIGURE1) author: cbus categories: 小知识 tags:小知识 abbrlink: 53691 date: 2025-04-20 08:03:00 错误1 set FORCE_UNSAFE_CONFIGURE1 在使用buildroot构建根文件系统时&#xff0c;一切按照文档的配置&#xff0…

7.QT-常用控件-QWidget|font|toolTip|focusPolicy|styleSheet(C++)

font API说明font()获取当前widget的字体信息.返回QFont对象.setFont(const QFont& font)设置当前widget的字体信息. 属性说明family字体家族.⽐如"楷体",“宋体”,"微软雅⿊"等.pointSize字体⼤⼩weight字体粗细.以数值⽅式表⽰粗细程度取值范围为[…

通过面向目标的奖励弥合人与机器人的灵活性差距

24年10月来自纽约大学的论文“Bridging the Human to Robot Dexterity Gap through Object-Oriented Rewards”。 直接通过人类视频训练机器人是机器人技术和计算机视觉领域的一个新兴领域。尽管双指机械手在双指夹持器方面取得了显著进展&#xff0c;但以这种方式让多指机械手…

C++入门篇(下)

目录 1、引用 1.1 引用概念 1.2 引用特性 1.3 常引用 1.4 使用场景 1.4.1 引用做参数 1.4.2 引用做返回值 1.5 引用和指针的区别 2、内联函数 2.1 概念 2.2 特性 3、auto关键字 4、基于范围的for循环 5、指针空值nullptr 5.1 C98 中的指针空值处理 5.2 C11 …

Multi-Query Attention (MQA) PyTorch 实现

和多头注意力机制的唯一区别&#xff1a;K、V在不同的head之间实现了复用&#xff0c;而对于不同的头&#xff0c;Q依然不同。 因此这里的代码和标准多头注意力的实现也是几乎完全一样&#xff1a; import torch import torch.nn as nn import torch.nn.functional as Fclass…

visual studio无法跳转到函数定义、变量定义、跳转函数位置不准问题解决

参考&#xff1a;https://blog.csdn.net/snakehacker/article/details/135438353 程序有时会出现大部分函数都不能准确的从头文件中正确定位到函数定位,这是因为数据库错乱造成的,可以通过重构数据库来解决,操作方法如下&#xff1a; 菜单栏&#xff1a;工具——选项 文本编辑…

Java优雅实现判空方法

在 Java 开发中&#xff0c;频繁的 if (obj ! null) 判空代码会导致代码冗余、可读性差&#xff0c;且容易遗漏判空导致 NullPointerException。以下从 语言特性、设计模式、工具类 和 编码规范 四个维度&#xff0c;结合实际案例&#xff0c;详解如何优雅处理空值问题。 一、…

京东百亿补贴杀入外卖市场:一场关乎即时零售未来的攻防战

当美团和饿了么在外卖市场双雄争霸十余年之际&#xff0c;京东突然以"百亿补贴免佣金"的组合拳高调入场。这场看似跨界的外卖大战&#xff0c;实则是互联网巨头对万亿级即时零售市场的生死争夺。 外卖只是表象&#xff0c;即时零售才是终极战场 京东黑板报4月10日官…

UNION和UNION ALL的主要区别

UNION和UNION ALL的主要区别在于处理重复数据和排序的方式。 UNION和UNION ALL都是SQL语言中用于合并两个或多个SELECT语句结果集的关键字。它们的主要区别如下&#xff1a; 1、对重复结果的处理&#xff1a;UNION在进行表链接后会筛选掉重复的记录&#xff0c;而UNION ALL不会…

七段码 路径压缩 并查集 dfs

12.七段码 - 蓝桥云课 将七个二极管映射为 1-7 开一个二维矩阵 为 相邻的边连上线 edge[1][2] edge[1][6] 1;edge[2][1] edge[2][3] edge[2][7] 1;edge[3][2] edge[3][4] edge[3][7] 1;edge[4][3] edge[4][5] 1;edge[5][4] edge[5][6] edge[5][7] 1;edge[6][1…

科技如何改变世界?

技术是我们日常生活中不可或缺的一部分&#xff0c;以至于我们常常忘记了它的重要性。如果你正在科技领域工作&#xff0c;或者希望进入该领域&#xff0c;你可能是众多有使命感的人之一&#xff0c;希望知道自己的日常工作能为社会或地球的长远利益做出贡献。 别再四处寻找了…

抽象的https原理简介

前言 小明和小美是一对好朋友&#xff0c;他们分隔两地&#xff0c;平时经常写信沟通&#xff0c;但是偶然被小明发现他回给小美的信好像被人拆开看过&#xff0c;甚至偷偷被篡改过。 对称加密算法 开头的通信过程比较像HTTP服务器与客户端的通信过程&#xff0c;全明文传输…

高级java每日一道面试题-2025年4月13日-微服务篇[Nacos篇]-Nacos如何处理网络分区情况下的服务可用性问题?

如果有遗漏,评论区告诉我进行补充 面试官: Nacos如何处理网络分区情况下的服务可用性问题&#xff1f; 我回答: 在讨论 Nacos 如何处理网络分区情况下的服务可用性问题时&#xff0c;我们需要深入理解 CAP 理论以及 Nacos 在这方面的设计选择。Nacos 允许用户根据具体的应用…

python解压文件 zip tar.gz tar.xz

以下代码为解压zip包 tar包文件 zip_path&#xff1a;文件绝对路径 output_folder&#xff1a;文件解压后存放的文件夹路径 def extract_file(zip_path, output_folder):# 支持解压zip tar tar.gz tar.xz .tar.bz2# 确保输出文件夹存在os.makedirs(output_folder, exist_okT…

网络基础(协议,地址,OSI模型、Socket编程......)

目录 一、计算机网络发展 二、协议 1.认识协议 2.OSI七层模型 3.TCP/IP 五层(或四层)模型 4.协议本质 三、网络传输流程 1.MAC地址 2.协议栈 3.IP地址 IP地址 vs MAC地址 1. 核心区别 2. 具体通信过程类比 3. 关键总结 为什么需要两者&#xff1f; 4.协议栈图解…