当前位置：首页 > news >正文

原生js写数据自动纵向滚动，鼠标移入后停止滚动可手动滚动，鼠标移出转自动

news 2026/3/28 6:18:25

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>滚动页面</title><link rel="stylesheet" href="styles.css"><style>body,html {margin: 0;padding: 0;overflow: hidden;}#scrollContainer {width: 100%;height: 100vh;overflow: hidden;position: relative;}#scrollContent {display: flex;flex-direction: column;transition: transform 0.3s ease;}.item {width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;font-size: 5em;color: white;}.item:nth-child(odd) {background-color: #333;}.item:nth-child(even) {background-color: #666;}</style>
</head><body><div id="scrollContainer"><div id="scrollContent"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div></div>
</body><script>const scrollContainer = document.getElementById('scrollContainer');const scrollContent = document.getElementById('scrollContent');let currentPosition = 0;let intervalId = null;const scrollDistance = 2;const itemHeight = scrollContent.clientHeight / scrollContent.children.length;const maxScrollPosition = 0;const minScrollPosition = -itemHeight * (scrollContent.children.length - 1);function autoScroll() {if (currentPosition <= minScrollPosition) {currentPosition = 0;}scrollContent.style.transform = `translateY(${currentPosition}px)`;currentPosition -= scrollDistance;}function startAutoScroll() {intervalId = setInterval(autoScroll, 20);}function stopAutoScroll() {clearInterval(intervalId);}function handleWheel(event) {currentPosition -= event.deltaY;if (currentPosition > maxScrollPosition) {currentPosition = maxScrollPosition;} else if (currentPosition < minScrollPosition) {currentPosition = minScrollPosition;}scrollContent.style.transform = `translateY(${currentPosition}px)`;}scrollContainer.addEventListener('mouseenter', function () {stopAutoScroll();scrollContainer.addEventListener('wheel', handleWheel);});scrollContainer.addEventListener('mouseleave', function () {scrollContainer.removeEventListener('wheel', handleWheel);startAutoScroll();});startAutoScroll();
</script></html>

初始化变量（currentPosition、intervalId、scrollDistance、itemHeight、maxScrollPosition、minScrollPosition），用于跟踪滚动状态和动画。
autoScroll()函数持续地将scrollContent向上移动（translateY），直到达到minScrollPosition，然后重置。
startAutoScroll()和stopAutoScroll()函数通过setInterval和clearInterval控制自动滚动动画。
handleWheel(event)函数根据鼠标滚轮事件（wheel）调整currentPosition，确保滚动保持在maxScrollPosition和minScrollPosition定义的范围内。
scrollContainer上的事件监听器（mouseenter、mouseleave）触发自动滚动停止/开始，并启用/禁用通过鼠标滚轮进行手动滚动。
在mouseenter时，自动滚动停止，并且可以通过鼠标滚轮进行手动滚动。
在mouseleave时，手动滚动停止，并且自动滚动恢复。
#scrollContent中的每个项目占满视口高度，页面可以通过自动或手动方式平滑滚动这些项目。

原生js写数据自动纵向滚动，鼠标移入后停止滚动可手动滚动，鼠标移出转自动

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>滚动页面</title><link rel"styleshee…...

编程日记 2024/6/21 2:02:58

板凳----Linux/Unix 系统编程手册 25章进程的终止

25.1 进程的终止：_exit()和exit() 440 1. _exit(int status)， status 定义了终止状态，父进程可调用 wait 获取。仅低8位可用，调用 _exit() 总是成功的。 2.程序一般不会调用 _exit()， 而是调用库函数 exit()。exit() …...

编程日记 2024/6/21 2:00:54

若依Ruoyi-vue和element admin的区别，该如何选择。

提到中后台的前端框架，每个人都能列举出很多，这其中提及率比较高的就是Ruoyi和element admin两款，很多小伙伴分不清二者，本文为大家详细讲解一下。一、若依Ruoyi-vue是什么？ 若依Ruoyi-Vue是一款基于 Vue.js 开发的…...

编程日记 2024/6/21 1:59:52

Sklearn之朴素贝叶斯应用

目录 sklearn中的贝叶斯分类器前言 1 分类器介绍 2 高斯朴素贝叶斯GaussianNB 2.1 认识高斯朴素贝叶斯 2.2 高斯朴素贝叶斯建模案例 2.3 高斯朴素贝叶斯擅长的数据集 2.3.1 三种数据集介绍 2.3.2 构建三种数据 2.3.3 数据标准化 2.3.4 朴素贝叶斯处理数据 2.4 高斯…...

编程日记 2024/6/21 1:58:51

网络编程（二）TCP编程 TCP粘包问题

文章目录一、TCP网络编程（一）流程（二）相关函数1. socket2. bind3. listen4. accept5. connect 二、收发函数（一）send函数（二）recv函数三、TCP粘包问题（一）将…...

编程日记 2024/6/21 1:57:50

【总线】AXI总线：FPGA设计中的通信骨干

目录 AXI4：高性能地址映射通信的基石 AXI4-Lite：轻量级但功能强大的通信接口 AXI4-Stream：高速流数据传输的利器结语：AXI总线在FPGA设计中的重要性大家好,欢迎来到今天的总线学习时间!如果你对电子设计、特别是FPGA和SoC设计…...

编程日记 2024/6/21 1:56:48

Cesium源码解析六（3dtiles属性获取、建筑物距离计算、建筑物着色及其原理分析）

快速导航 Cesium源码解析一（搭建开发环境） Cesium源码解析二（terrain文件的加载、解析与渲染全过程梳理） Cesium源码解析三（metadataAvailability的含义） Cesium源码解析四（metadata元数据拓展…...

编程日记 2024/6/21 1:54:45

AI 情感聊天机器人之旅 —— 相关论文调研

开放域闲聊场景 Prompted LLMs as Chatbot Modules for Long Open-domain Conversation 发布日期：2023-05-01 简要介绍：作者提出了 MPC（模块化提示聊天机器人），这是一种无需微调即可创建高质量对话代理的新方法&…...

编程日记 2024/6/21 1:53:42

WPF Prism框架搭建

WPF Prism框架搭建 1.引入Prism框架在Nuget包管理器中搜索Prism，并添加到项目中 2.在项目中使用prism框架 2.1 修改app.xaml 删除项目中自带的StartupUri 修改Application节点为prism:PrismApplication 引入prism命名空间 <prism:PrismApplication x:C…...

编程日记 2024/6/21 1:52:40

MyBatisplus使用报错--Invalid bound statement

报错如下 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.lotus.mybatis.mapper.UserMapper.selectListat org.apache.ibatis.binding.MapperMethod$SqlCommand.<init>(MapperMethod.java:235)at com.baomidou.mybatisplus.cor…...

编程日记 2024/6/21 1:50:38

QT-QPainter实现一个动态充电的电池

1、效果 2、核心代码 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTimer>...

编程日记 2024/6/21 1:49:36

【云原生】Kubernetes----Metrics-Server组件与HPA资源

目录引言一、概述 （一）Metrics-Server简介 （二）Metrics-Server的工作原理 （三）HPA与Metrics-Server的作用 （四）HPA与Metrics-Server的关系 （五）HPA与…...

编程日记 2024/6/21 1:48:35

模拟原神圣遗物系统-小森设计项目，设计圣遗物（生之花，死之羽，时之沙，空之杯，理之冠）抽象类

分析圣遗物在圣遗物系统，玩家操控的是圣遗物的部分因此我们应该物以类聚人与群分把每个圣遗物的部分，抽象出来拿生之花，死之羽为例若是抽象类很好的扩展添加冒险家的生之花时候继承生之花并且名称冒险者- 生之花当然圣遗物包含…...

编程日记 2024/6/21 1:47:32

仿真模拟--telnet服务两种认证模式(自作)

自己做的笔记,有问题或看不懂请见解一下~ 目录两个路由器间实现telnet服务(password认证模式) server client 两个路由器间实现telnet服务(aaa认证模式) server client 改名 tab键补齐不会就扣问号 ? save 两个路由器间实现telnet服务…...

编程日记 2024/6/21 1:45:30

Apple Phone Memory

Apple Phone Memory 苹果手机内存查询，哪些应用程序（app）占用内存： 设置通用 iPhone储存空间清理下QQ音乐：...

编程日记 2024/6/21 1:44:29

Kubernetes容器运行时：Containerd vs Docke

容器化技术笔记 Kubernetes容器运行时：Containerd vs Docke - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite：http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this arti…...

编程日记 2024/6/21 1:43:27

【java 线程的状态】

介绍 Java 线程在运⾏的⽣命周期中的指定时刻只可能处于下⾯ 6 种不同状态的其中⼀个状态状态名称说明NEW初始状态,线程被构建,但是还没有调用start()方法RUNNABLE运行状态,Java线程将操作系统中的就绪和运行两种状态统称为"运行中"BLOCKED阻塞状态,表示线程阻塞于…...

编程日记 2024/6/21 1:42:26

php加密验签

签名生成步骤（小程序端/前端）： 确定参与签名的参数：选择需要参与签名的请求参数，通常包括请求的时间戳、随机数、请求的数据等。参数排序与拼接：将所有参与签名的参数按照字母顺序排序，并拼接成…...

编程日记 2024/6/21 1:41:24

【Golang - 90天从新手到大师】Day06 - 数组

系列文章合集 Golang - 90天从新手到大师数组是golang中最常用的一种数据结构,数组就是同一类型数据的有序集合定义一个数组格式: var name [n]type n为数组长度,n>0 且无法修改,type为数组的元素类型如: var a [2]int上面的例子定义了一个长度为2,元素类型为int的数组…...

编程日记 2024/6/21 1:40:22

java的有参构造方法

java的有参构造方法和无参构造方法类似，区别是构造方法名称里后面跟着一个括号，括号里是参数的定义示例代码如下 class student4{private String name;private int age;public student4(String n,int a) {namen;agea;System.out.println("调用了…...

编程日记 2024/6/21 1:38:19

嵌入式系统调试常见问题与解决方案

嵌入式系统调试中的典型问题分析与解决策略1. 常见调试问题案例分析1.1 程序文件版本错误在嵌入式开发过程中，一个常见的低级错误是使用了错误的程序文件版本。某工程师在调试时发现单片机完全不执行程序，即使是最基本的GPIO控制也无法实现。经过以下排查…...

编程新知 2026/3/28 4:40:02

ReAct Agent：新手程序员必看！收藏这款融合推理与行动的AI智能体框架，轻松入门大模型应用开发

ReAct框架通过结合推理与行动，解决了传统提示工程的局限性，构建出能主动思考、决策并执行复杂任务的智能体。本文详细介绍了ReAct的核心设计思想，包括推理模块的动态思考链和错误回溯机制，以及行动模块的工具集成和环境状态感知。…...

编程新知 2026/3/28 4:05:49

量子行走：从理论到Python实现——量子力学原理与Qubit物理

目录 2. 量子力学原理与Qubit物理 2.1 量子比特的物理实现 2.1.1 双能级系统建模 2.1.2 布洛赫球表示与可视化 2.2 叠加与纠缠现象 2.2.1 量子叠加原理 2.2.2 量子纠缠理论 2.3 量子测量与退相干 2.3.1 测量公设的实现 2.3.2 噪声与退相干机制 2. 量子力学原理与Qubi…...

编程新知 2026/3/28 3:17:14

零基础学编程：借助快马与claude code生成交互式代码示例入门javascript

最近刚开始学习JavaScript，发现数组操作是编程中最基础也最常用的部分。作为一个完全零基础的小白，我尝试用InsCode(快马)平台结合Claude Code来学习这个知识点，整个过程比想象中顺利很多。这里记录下我的学习过程，希望能帮到同样…...

编程新知 2026/3/28 2:20:51

脉冲雷达系统仿真：从理论建模到Matlab代码实现

1. 脉冲雷达系统仿真入门指南第一次接触雷达系统仿真时，我和大多数初学者一样，面对满屏的数学公式和专业术语完全摸不着头脑。直到把实验室那台老式示波器玩坏了三次之后，我才真正理解脉冲雷达仿真的核心逻辑——它本质上就是在计算机里搭建…...

编程新知 2026/3/28 2:12:27

悬浮门厂家次评：专业视角下的悬浮门（悬航门）品牌解析

悬浮门厂家次评是当前高端出入口领域备受关注的话题，随着各类园区、机关单位、学校等场景对安防与形象要求的提升，悬浮门（悬航门）凭借其平稳运行、静音美观、抗风稳固等特性，逐渐成为大门采购的主流选择。本文基于行业…...

编程新知 2026/3/28 2:08:20

嵌入式工程师技术成长路径：从单片机到Linux驱动开发

嵌入式工程师职业发展路径的技术思考1. 职业发展阶段与技术演进1.1 单片机开发阶段对于刚毕业的电子工程专业学生，单片机开发通常是职业起点。这一阶段主要涉及：8/16/32位微控制器(如STM32系列)的应用开发基础外设驱动开发(GPIO、UART、SPI、I2C等)实时操…...

编程新知 2026/3/28 1:48:04

降重不靠删，降AI不靠装——百考通用语义重构守住你的原创观点

在2026年的高校毕业季，一种新型的不公正在悄然制度化： 不是抄袭者被放过，而是原创者被怀疑； 不是敷衍者被批评，而是严谨者被标记； 不是懒惰者被警告，而是认真写了一篇好论文的人，被迫…...

编程新知 2026/3/28 0:45:32

多层PCB结构与设计核心技术解析

多层PCB内部结构解析与设计指南1. 多层PCB技术概述1.1 多层PCB的基本概念现代电子设备对电路板的要求越来越高，多层PCB已成为复杂电子系统的标准配置。与单层或双层PCB相比，多层PCB通过在绝缘基材上叠加多个导电层，实现了更高的布线密度和更优…...

编程新知 2026/3/28 0:43:32

【大模型工程实践③】RAG 基础架构与完整实现

【大模型工程实践③】RAG 基础架构与完整实现：从0到1跑通作者：AI学习者 | 来源：大模型工程实践学习系列 | 更新：2026年3月【理论要点速览】学习本篇前，建议先掌握以下核心理论（点击跳转）： ① 为什么需要RAG？ ② RAG vs Fine-tuning vs Long Context的决策框架 ③ …...

编程新知 2026/3/27 23:32:40

相关文章：