AI会话问答的页面滚动处理(参考deepseek页面效果)

近期在接入deepseekR1的深度思考,研究了下deepseek官网的滚动效果,大概如下:用户发出消息后,自动滚动到页面最底部,让最新消息展示在视野中,这时候,我们先处理一次滚动:


const scrollDom = ref(null); // 获取DOM
if (scrollDom.value) {const maxScrollTop = robotScroll.value.scrollHeight - robotScroll.value.clientHeight;scrollDom.value.scrollTop = maxScrollTop;}

这时候,消息发出,AI开始回答,这时候,如果用户没有滚动页面,那么就依然是在底部,并且随着AI回答的文字渐渐冒出,我们去把页面慢慢滚动,保持一直可以看到最新冒出的消息。但是注意需要判断:用户如果滚动了页面(例如在查看顶部其他回答),我们是不能打断用户操作的,这个时候我们不进行页面滚动处理。如下:

// 判断在最底部才继续黏贴在底部滚动
const stickToBottom = () => {const scrollEl = scrollDom.value;if (!scrollEl) return;// 记录当前滚动状态const currentScrollTop = scrollEl.scrollTop;const currentMaxScroll = scrollEl.scrollHeight - scrollEl.clientHeight;// 判断是否已经到底部(允许1px误差)const isAtBottom = currentScrollTop >= currentMaxScroll - 1;nextTick(() => {if (!scrollEl) return;// 只有当前在底部时才滚动if (isAtBottom) {console.log('当前到达底部了,滚动√')const newMaxScroll = scrollEl.scrollHeight - scrollEl.clientHeight;scrollEl.scrollTop = newMaxScroll;} else {console.log('未到达底部,不滚动')}});
}

这个时候用户的体验感就比较好了~~

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

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

相关文章

【Qt】:概述(下载安装、认识 QT Creator)

🌈 个人主页:Zfox_ 🔥 系列专栏:Qt 目录 一:🔥 介绍 🦋 什么是 QT🦋 QT 发展史🦋 Qt版本🦋 QT 优点 一:🔥 搭建Qt开发环境 &#x1f9…

设置mysql的主从复制模式

mysql设置主从复制模式似乎很容易,关键在于1)主库启用二进制日志,2)从库将主库设为主库。另外,主从复制,复制些什么?从我现在获得的还很少的经验来看,复制的内容有表,用户…

halo发布文章的插件问题分析

前言 在准备发文到 halo 系统的时候提示错误如下,全是乱码 尝试将 halo 插件卸载后,再将插件目录下的文件全部删除 插件目录在 C:\Users\Administrator\.vscode\extensions\halo-dev.halo-1.3.0 然后再重新安装插件,在进行初始化的时候依然…

Spring Data Neo4j

文章目录 Spring Data Neo4j简介Neo4j-OGM与SDN的区别 开发体验版本说明项目地址项目结构创建项目配置连接信息激活事务管理器创建实体类Movie类Person类ActedIn关系类 创建Dao层service层测试案例CRUD TestPersonService TestActedIn Test 执行结果查询 Spring Data Neo4j简介…

Java发展史

JavaEE的由来 语言的诞生 Java的前身是Oak语言,其目的是搞嵌入式开发开发智能面包机 叮~~~🍞🍞🍞 产品以失败告终 巅峰 网景公司需要网景浏览器打开网页,Oak->Java,进行前端开发(相关技…

怎么让DeepSeek自动化写作文案

在数字化时代,内容创作已成为企业争夺用户注意力的核心竞争力。面对海量信息需求,企业往往面临内容创作效率低下、质量参差不齐、周期长等问题。如何用技术手段解决这些痛点,成为企业迫切需要破解的难题。今天,我们将以DeepSeek为…

Mysql之主从复制

目录 1.概述 2.工作原理 3.综合案例 3.1前期准备 3.2主库配置 3.3从库配置 3.4常见问题 3.4.1主从同步出现一下错误:Slave_IO_Running: No 3.4.1主从同步出现一下错误:Slave_IO_Running: Connecting? 3.5数据测试 1.概述 MySQL的主从复制&am…

从无序到有序:上北智信通过深度数据分析改善会议室资源配置

当前企业普遍面临会议室资源管理难题,预约机制不完善和临时会议多导致资源调度不合理,既有空置又有过度拥挤现象。 针对上述问题,上北智信采用了专业数据分析手段,巧妙融合楼层平面图、环形图、折线图和柱形图等多种可视化工具&a…

使用pyCharm创建Django项目

使用pyCharm创建Django项目 1. 创建Django项目虚拟环境(最新版版本的Django) 使用pyCharm的创建项目功能,选择Django,直接创建。 2. 创建Django项目虚拟环境(安装特定版本) 2.1创建一个基础的python项目 2.2 安装指定版本的D…

RabbitMQ 在 Spring Boot中使用方式

文章目录 作用MQ docker 安装MQ使用RabbitMQ的整体架构及核心概念:RabbitMQ的整体架构及核心概念:消费者消息推送限制交换机与队列## 项目使用MQDirect: 直连模式Fanout: 广播模式Topic: 主题模式Headers: 头信息模式 使用DEMO地址异常问题记录 作用 Ra…

力扣动态规划-30【算法学习day.124】

前言 ###我做这类文章一个重要的目的还是记录自己的学习过程,我的解析也不会做的非常详细,只会提供思路和一些关键点,力扣上的大佬们的题解质量是非常非常高滴!!! 习题 1.零钱兑换 题目链接:322. 零钱兑…

AI在电竞比分网中的主要应用场景

AI在电竞体育比分网的数据应用非常广泛,能够显著提升数据分析、预测、用户体验和商业价值。以下是AI在电竞比分网中的主要应用场景: 1. 实时数据采集与分析 比赛数据实时更新:AI通过自动化系统实时采集比赛数据(如击杀数、经济差、…

【Spring Boot】Spring 魔法世界:Bean 作用域与生命周期的奇妙之旅

前言 ???本期讲解关于spring原理Bean的相关知识介绍~~~ ??感兴趣的小伙伴看一看小编主页:-CSDN博客 ?? 你的点赞就是小编不断更新的最大动力 ??那么废话不多说直接开整吧~~ 目录 ???1.Bean的作用域 ??1.1概念 ??1.2Bean的作用域 ??1.3代码演示…

用 Python 实现 DeepSeek R1 本地化部署

DeepSeek R1 以其出色的表现脱颖而出,不少朋友想将其本地化部署,网上基于 ollama 的部署方式有很多,但今天我要带你领略一种全新的方法 —— 使用 Python 实现 DeepSeek R1 本地化部署,让你轻松掌握,打造属于自己的 AI…

软考-系统架构设计师(月更版)

1.需求管理的主要活动包括变更控制,版本控制,需求跟踪,需求状态跟踪 需求跟踪是单个需求和其他系统元素之间的依赖关系和逻辑联系建跟踪, 这些元素包括各种类型的需求、业务规则、系统架构和构件、源代码、测试用例,以…

IOTDB安装部署

IOTDB一般用于工业互联网,至于具体的介绍请自行搜索 1.环境准备 安装前需要保证设备上配有 JDK>1.8 的运行环境,并配置好 JAVA_HOME 环境变量。 设置最大文件打开数为 65535。 关闭防火墙 systemctl stop firewalld.service systemctl disable …

分享 UniApp 实现列表长按删除功能

在移动应用开发中,列表是常见的展示形式,而长按删除列表项也是一个实用且常见的交互功能。今天就来和大家分享如何在 UniApp 中实现列表的长按删除功能,同时附上详细的代码。 效果预览 通过代码实现后,我们将得到一个带有红色边…

leetcode 2684. 矩阵中移动的最大次数

题目如下 数据范围 本题使用常规动态规划就行&#xff0c;不过要注意由于有三个转移的方向&#xff0c;所以我们对dp数组的遍历应该是从上到下 从左到右即按列优先遍历。通过代码 class Solution { public:int maxMoves(vector<vector<int>>& grid) {int …

深入剖析 Burp Suite:Web 应用安全测试利器

目录 前言 一、Burp Suite 简介 二、功能组件详解 三、使用场景 四、安装与使用步骤 安装步骤 使用步骤 五、总结 前言 在网络安全的复杂版图中&#xff0c;Burp Suite 宛如一颗璀璨的明珠&#xff0c;以其强大的功能和广泛的适用性&#xff0c;成为众多安全从业者不可…

linux内网部署deepseek大模型(ollama+anythingllm)

一、安装ollama 来源&#xff1a;ollama/docs/linux.md at main ollama/ollama GitHub 1.下载安装包 ollama下载链接&#xff1a;https://ollama.com/download/ollama-linux-amd64.tgz&#xff0c;下载后放在用户目录下 2.运行脚本 #!/bin/sh # This script installs Olla…