純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.pswp.cn/news/902172.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/902172.shtml
英文地址,請注明出處:http://en.pswp.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.協議棧圖解…