vue3中文字滚动代码

一、功能概述该段 TS/Vue3 代码实现容器自动匀速滚动功能具备以下核心特性页面加载后自动向下滚动容器用户手动操作容器鼠标滚轮、拖动滚动条立即停止自动滚动滚动到达底部 / 超时自动终止滚动定时器基于 setInterval 步进式平滑滚动可调节滚动速度使用标识位区分「程序自动滚动」和「用户手动交互」避免冲突。依赖说明Vue3 APInextTick、refscTop 为容器 DOM ref原生定时器setInterval / clearIntervalTS 类型约束区分数字 / 空定时器标识二、完整源码typescript运行// 全局定时器标识存储滚动计时器IDnull代表无计时器let scrollInterval: number | null null;// 用户交互标记true用户手动操作过滚动终止自动滚动let userInteracted false;/*** 停止自动滚动统一方法* 触发场景用户滚轮/拖动滚动条、滚动到达终点、滚动超时*/const stopScroll () {// 标记用户已交互永久阻止后续自动滚动userInteracted true;// 存在定时器则清除并置空标识if (scrollInterval ! null) {clearInterval(scrollInterval);scrollInterval null;}};/*** 启动容器自动向下滚动逻辑* description 步进式持续滚动满足终止条件则自动销毁定时器*/const handleScroll () {// 终止条件1用户已经手动操作过 || 容器DOM不存在直接退出不启动滚动if (userInteracted || !scTop.value) return;// 获取滚动初始位置、滚动最大底部边界let startPosition scTop.value.scrollTop;// 容器可滚动总高度 内容总高度 - 容器可视高度let endPosition scTop.value.scrollHeight - scTop.value.clientHeight;// 滚动步长计数器同时用作超时阈值let h 1;// 创建定时滚动任务保存定时器IDscrollInterval window.setInterval(() {// 终止条件2用户交互 || 滚动步数超限超时保护防止死循环if (userInteracted || h 1000) {if (scrollInterval ! null) {clearInterval(scrollInterval);scrollInterval null;}return;}// nextTick 等待DOM更新完成后修改滚动位置保证渲染同步nextTick(() {if (scTop.value) {// 每次滚动偏移量 基础位置 步数 * 单步像素scTop.value.scrollTop startPosition h * 3;}});// 步数自增控制滚动距离h;}, 10); // 定时器间隔(ms)数值越小滚动越顺滑、速度越快};三、变量逐行详解1. scrollInterval: number | null null类型数字 / 空作用存储 setInterval 返回的计时器 ID用于手动清除滚动初始值 null代表当前无运行中的滚动定时器设计目的防止重复创建多个定时器避免滚动加速、抖动 bug。2. userInteracted false布尔标记核心交互拦截标识false未手动操作允许自动滚动执行true用户操作过滚动永久停止自动滚动不会再次触发触发变为 true 的唯一入口stopScroll() 函数。四、函数详细解析4.1 stopScroll () 停止滚动工具函数执行逻辑将 userInteracted 置为 true永久屏蔽自动滚动判断定时器存在执行 clearInterval 销毁定时任务将 scrollInterval 重置为 null释放标记。调用时机监听容器 wheel / scroll / mousedown 事件用户拖动滚动条、滑动鼠标时调用滚动逻辑内部满足终止条件时自调用清除定时器。4.2 handleScroll () 启动自动滚动入口前置拦截函数开头判断typescript运行if (userInteracted || !scTop.value) return;userInteracted用户操作过直接放弃启动!scTop.value容器 DOM 元素未挂载ref 为空无法执行滚动直接退出。滚动边界变量typescript运行let startPosition scTop.value.scrollTop;let endPosition scTop.value.scrollHeight - scTop.value.clientHeight;scrollTop容器当前滚动垂直偏移scrollHeight容器内部全部内容高度clientHeight容器可视区域高度endPosition滚动能到达的最底部像素值。步长计数器 h初始 h1每轮定时器 1双重作用计算滚动偏移h * 3 控制每次向下滚动 3 像素超时保护h 1000 强制终止定时器防止页面无限滚动、内存泄漏。setInterval 定时滚动核心typescript运行scrollInterval window.setInterval(() {}, 10)间隔 10ms 执行一次滚动更新调参说明间隔时间越小 → 滚动越顺滑、速度越快间隔时间越大 → 滚动卡顿、速度变慢。nextTick 作用Vue DOM 更新异步修改 scrollTop 放入 nextTick 回调确保 DOM 渲染完成后再赋值避免滚动不生效、位置错乱。滚动位移公式typescript运行scTop.value.scrollTop startPosition h * 3;startPosition滚动启动瞬间的初始位置h * 3每帧累加 3 像素向下滚动修改数字 3 可调节滚动速度数值越大单次滚动距离越大滚动越快。定时器内部终止判断typescript运行if (userInteracted || h 1000)满足任一条件立即清除定时器用户手动滚动循环步数超过 1000 次安全兜底终止。五、配套使用示例补充完整调用代码1. Vue 模板容器vuetemplate!-- 可滚动容器绑定ref监听用户交互事件 --divrefscTopwheelstopScrollmousedownstopScrollstyleheight: 400px; overflow-y: auto;大量超长内容.../div/template2. script ref 定义与触发滚动typescript运行import { ref, nextTick, onMounted } from vue// 容器DOM绑定const scTop refHTMLDivElement | null(null)// 页面挂载完成启动自动滚动onMounted(() {handleScroll()})六、参数调优指南滚动快慢调节单次滚动像素修改 h * 3 中数字改为 5 更快1 更慢更顺滑定时器间隔修改 105 毫秒更快20 毫秒更平缓。超时保护时长h 1000间隔 10ms 时1000 次 10 秒自动停止可按需修改数值。是否允许重新滚动当前 userInteracted 一旦为 true 永久停止如需重置可新增重置方法typescript运行const resetAutoScroll () {userInteracted falsehandleScroll()}代码如下let scrollInterval: number | null null; let userInteracted false; const stopScroll () { userInteracted true; if (scrollInterval ! null) { clearInterval(scrollInterval); scrollInterval null; } }; const handleScroll () { if (userInteracted || !scTop.value) return; // Start from the current scroll position let startPosition scTop.value.scrollTop; let endPosition scTop.value.scrollHeight - scTop.value.clientHeight; let h 1; scrollInterval window.setInterval(() { if (userInteracted || h 1000) { if (scrollInterval ! null) { clearInterval(scrollInterval); scrollInterval null; } return; } nextTick(() { if (scTop.value) { scTop.value.scrollTop startPosition h * 3; } }); h; }, 10); // Adjust the interval time for smoother or faster scrolling };