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

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

news 2026/5/13 4:42:55 
<!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 进程的终止&#xff1a;_exit()和exit() 440 1. _exit(int status)&#xff0c; status 定义了终止状态&#xff0c;父进程可调用 wait 获取。仅低8位可用&#xff0c;调用 _exit() 总是成功的。 2.程序一般不会调用 _exit()&#xff0c; 而是调用库函数 exit()。exit() …...

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

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

提到中后台的前端框架&#xff0c;每个人都能列举出很多&#xff0c;这其中提及率比较高的就是Ruoyi和element admin两款&#xff0c;很多小伙伴分不清二者&#xff0c;本文为大家详细讲解一下。 一、若依Ruoyi-vue是什么&#xff1f; 若依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网络编程&#xff08;一&#xff09;流程&#xff08;二&#xff09;相关函数1. socket2. bind3. listen4. accept5. connect 二、收发函数&#xff08;一&#xff09;send函数&#xff08;二&#xff09;recv函数 三、TCP粘包问题&#xff08;一&#xff09;将…...

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

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

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

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

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

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

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

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

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

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

WPF Prism框架搭建

WPF Prism框架搭建 1.引入Prism框架 在Nuget包管理器中搜索Prism&#xff0c;并添加到项目中 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资源

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

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

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

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

编程日记 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 苹果手机内存查询&#xff0c;哪些应用程序&#xff08;app&#xff09;占用内存&#xff1a; 设置 通用 iPhone储存空间 清理下QQ音乐&#xff1a;...

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

Kubernetes容器运行时：Containerd vs Docke

容器化技术笔记 Kubernetes容器运行时&#xff1a;Containerd vs Docke - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;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加密验签

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

编程日记 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的有参构造方法和无参构造方法类似&#xff0c;区别是构造方法名称里后面跟着一个括号&#xff0c;括号里是参数的定义 示例代码如下 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

macOS Unlocker V3.0：在Windows/Linux电脑上运行macOS虚拟机的终极指南

macOS Unlocker V3.0&#xff1a;在Windows/Linux电脑上运行macOS虚拟机的终极指南 【免费下载链接】unlocker VMware Workstation macOS 项目地址: https://gitcode.com/gh_mirrors/unlo/unlocker macOS Unlocker V3.0是一款革命性的开源工具&#xff0c;专为VMware W…...

编程新知 2026/5/13 3:30:56

oh-my-prompt：打造高效终端提示符的模块化方案与实战配置

1. 项目概述&#xff1a;为什么我们需要一个现代化的终端提示符&#xff1f;如果你和我一样&#xff0c;每天有超过一半的工作时间是在终端&#xff08;Terminal&#xff09;里度过的&#xff0c;那么终端提示符&#xff08;Prompt&#xff09;就是你最熟悉的“工作台面”。默认…...

编程新知 2026/5/13 3:24:06

英雄联盟R3nzSkin换肤工具：5分钟快速上手免费皮肤解锁指南

英雄联盟R3nzSkin换肤工具&#xff1a;5分钟快速上手免费皮肤解锁指南 【免费下载链接】R3nzSkin-For-China-Server Skin changer for League of Legends (LOL) 项目地址: https://gitcode.com/gh_mirrors/r3/R3nzSkin-For-China-Server 还在为英雄联盟国服昂贵的皮肤价…...

编程新知 2026/5/13 2:45:01

Sunshine游戏串流服务器：打造你的个人云端游戏平台

Sunshine游戏串流服务器&#xff1a;打造你的个人云端游戏平台 【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 想要在任何设备上畅玩PC游戏&#xff1f;Sunshine游戏串流服务器是你…...

编程新知 2026/5/13 0:55:02

大模型选型生死局（企业CTO私藏对比清单）：Claude在长文档法律分析胜出32%，Gemini在实时多跳检索快4.8倍——你的业务该选谁？

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;大模型选型生死局&#xff1a;Claude vs Gemini核心能力全景图 在企业级AI应用落地的关键阶段&#xff0c;模型选型已远非单纯比拼参数量或基准分数&#xff0c;而是对推理鲁棒性、上下文工程适配度、多…...

编程新知 2026/5/12 23:42:31

照片去背景的方法有哪些？2026年最全工具推荐与实用指南

前两天有个朋友问我&#xff0c;怎样能快速把证件照的底色换掉&#xff0c;还有电商卖家想给商品图去背景。我才意识到&#xff0c;现在还有很多人不知道照片去背景有这么多方便的办法。与其逐个讲解&#xff0c;我决定写篇文章&#xff0c;把我这些年试过的各种照片去背景的方…...

编程新知 2026/5/12 22:43:57

别再只点CubeMX的SDRAM选项了！STM32F429IGT6外扩W9825G6KH内存的完整驱动与读写测试指南

STM32F429IGT6外扩W9825G6KH内存实战&#xff1a;从CubeMX配置到完整驱动开发的深度解析 如果你正在使用STM32F429IGT6开发板&#xff0c;并且需要扩展大容量内存&#xff0c;W9825G6KH-6I这颗32MB的SDRAM芯片可能已经在你的硬件清单上。许多开发者习惯性地依赖STM32CubeMX生成…...

编程新知 2026/5/12 22:41:40

Windows内核级虚拟串口驱动com0com：构建无限虚拟COM端口对的终极解决方案

Windows内核级虚拟串口驱动com0com&#xff1a;构建无限虚拟COM端口对的终极解决方案 【免费下载链接】com0com Null-modem emulator - The virtual serial port driver for Windows. Brought to you by: vfrolov [Vyacheslav Frolov](http://sourceforge.net/u/vfrolov/profil…...

编程新知 2026/5/12 20:50:42

Google 2026 AI全家桶升级：企业管理员必须在48小时内完成的3项策略校准与2项合规备案

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Google 2026 AI全家桶升级全景图 2026年&#xff0c;Google正式发布新一代AI基础设施矩阵——“Project Aether”&#xff0c;标志着其AI全家桶从模块化协同迈向原生融合时代。核心升级聚焦于模型、工具…...

编程新知 2026/5/12 20:43:33

飞书文档批量导出工具：25分钟搞定700+文档的迁移难题

飞书文档批量导出工具&#xff1a;25分钟搞定700文档的迁移难题 【免费下载链接】feishu-doc-export 飞书文档导出服务 项目地址: https://gitcode.com/gh_mirrors/fe/feishu-doc-export 当企业需要切换办公平台或进行数据备份时&#xff0c;飞书文档的批量迁移常常成为…...

编程新知 2026/5/12 20:35:07