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

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

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

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

相关文章

Linux环境下,怎么排查os中系统负载过高的原因瓶颈?

在Linux环境下排查系统负载过高的原因和瓶颈&#xff0c;可以采取以下步骤&#xff1a; 使用top或htop命令观察系统整体负载情况。查看load average的值&#xff0c;分别表示系统在1分钟、5分钟和15分钟内的平均负载。如果负载值超过CPU核心数量的70-80%&#xff0c;表示系统负…

【内含优惠码】重磅发售!《2023年度中国量化投资白皮书》(纸质版)

这是可以公开了解量化行业图景的&#xff0c;为数不多资料。 简介 《2023年度中国量化投资白皮书》由宽邦科技、华泰证券、金融阶、华锐技术、AMD、阿里云、英迈中国等多家机构联合发起编写&#xff0c;并于2024年6月15日正式发布&#xff0c;全书公17万字6大章节勾勒最新量化…

Studying-代码随想录训练营day15| 222.完全二叉树的节点个数、110.平衡二叉树、257.二叉树的所有路径、404.左叶子之和

第十五天&#xff0c;二叉树part03&#x1f4aa;&#xff0c;编程语言&#xff1a;C 目录 257.完全二叉树的节点个数 110.平衡二叉树 257.二叉树的所有路径 404.左叶子之和 总结 257.完全二叉树的节点个数 文档讲解&#xff1a;代码随想录完全二叉树的节点个数 视频讲解…

Arduino平台软硬件原理及使用——无源蜂鸣器模块的使用

文章目录 一、蜂鸣器发声原理 二、无源蜂鸣器与有源蜂鸣器的区分 三、无源蜂鸣器模块在Arduino中的使用 一、蜂鸣器发声原理 上图为常见的不同封装及规格的蜂鸣器。 同蜜蜂、知了等昆虫发声原理一样&#xff0c;蜂鸣器同样靠振动来发出声音&#xff1b; 如上图为无源蜂鸣器的内…

【总结】ui自动化selenium知识点总结

1. 大致原理 首页安装第三方库selenium库&#xff0c; 其次要下载好浏览器驱动文件&#xff0c;比如谷歌的 chromedriver.exe&#xff0c;配置上环境变量。 使用selenium的webdriver类去创建一个浏览器驱动对象赋值叫driver&#xff0c;一个浏览器驱动对象就可以 实现 对浏…

【vue3|第11期】Vue3中的ref属性:让元素引用变得简单

日期&#xff1a;2024年6月19日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xf…

qt当中ui卡顿如何处理,以下是几种处理方法

当在 Qt 应用程序中出现 UI 响应卡顿的情况时&#xff0c;可以考虑以下几种方式来改善和处理&#xff1a; 使用多线程&#xff1a; 将耗时的操作放在单独的线程中执行&#xff0c;以避免阻塞主线程。可以使用 Qt 的线程机制&#xff08;例如 QThread 类&#xff09;或者使用 Q…

二叉树的基本操作以及一些二叉树相关例题

目录 1,获取树中节点的个数 2,获取叶子节点的个数 3,获取叶子节点的个数(2) 4,获取第K层节点的个数 5,获取二叉树的高度 6,检测值为value的元素是否存在 例题1:相同的树问题 例题2:另一棵树的子树问题 例题3:翻转二叉树 例题4:对称二叉树 1,获取树中节点的个数 publi…

招聘主播?小心是大陷阱!!!

高薪招聘主播的骗局通常涉及一系列精心设计的步骤&#xff0c;旨在引诱求职者上钩并从中获利。以下是这种骗局常见的几个关键环节&#xff1a; 首先&#xff0c;骗子会通过各种渠道发布诱人的招聘信息&#xff0c;声称正在寻找有潜力的主播&#xff0c;并承诺提供高额的底薪和…

MySQL UPDATE查询的用法和注意事项

MySQL是一种流行的关系型数据库管理系统&#xff0c;其中UPDATE查询是用于修改表中数据的重要操作。通过使用UPDATE查询&#xff0c;可以更新表中的记录&#xff0c;实现数据的动态更新和修改。本文将总结MySQL UPDATE查询的用法和注意事项&#xff0c;帮助读者更好地理解和应用…

虚拟3D沉浸式展会编辑平台降低了线上办展的门槛

在数字化浪潮的引领下&#xff0c;VR虚拟网上展会正逐渐成为企业展示品牌实力、吸引潜在客户的首选平台。我们与广交会携手走过三年多的时光&#xff0c;凭借优质的服务和丰富的经验&#xff0c;赢得了客户的广泛赞誉。 面对传统展会活动繁多、企业运营繁忙的挑战&#xff0c;许…

【绝对有用】刚刚开通的GPT-4o计算这种数学题目出现问题了

欢迎关注如何解决以上问题的方法&#xff1a;查看个人简介中的链接的具体解决方案

[Qt的学习日常]--窗口

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、窗口的分…

全面了解虚拟线上会议室的核心功能和优势,助力企业高效协作

在现代办公环境中&#xff0c;虚拟线上会议室日益普及&#xff0c;成为企业沟通协作的重要工具。虚拟会议室的出现不仅简化了传统会议的复杂流程&#xff0c;还提供了一系列优势功能&#xff0c;提升了用户的会议体验。 一、虚拟线上会议室的优势功能 1、实时音视频会议 虚拟线…

全网最易懂,开源时序数据库influxDB,实际应用评测

前言&#xff1a; 当今是信息爆炸的时代&#xff0c;在处理高频数据时&#xff0c;关系型数据库oracle/mysql明显表现出乏力&#xff0c;因秒级、毫秒级高频数据&#xff0c;分分钟可以把关系型数据库的表塞爆。在日常生活工作中&#xff0c;我们经常会遇到哪些需要高频分析的场…

[自动驾驶 SoC]-3 英伟达Orin

NVIDIA Jetson AGX OrinTM series (资料来源&#xff1a;nvidia-jetson-agx-orin-technical-brief.pdf) 1 整体介绍 1) Orin SoC结构 Orin SoC&#xff0c;如下图所示&#xff0c;由一个NVIDIA Ampere architecture GPU, Arm Cortex-A78AE CPU, 下一代深度学习核视觉处理加速…

华为 IPV6 配置

[r1]ipv6 必须先在设备上开启IPV6服务 [r1]interface GigabitEthernet 0/0/1 r1-GigabitEthernet0/0/1]ipv6 enable 再在接口上激活IPV6服务&#xff0c;才能配置ipv6地址 配置 ipv6 地址 [r1-GigabitEthernet0/0/1]ipv6 address 2001::1/64 [r1-GigabitEthernet0/0/…

企业防盗版,如何保障上网安全

信息化的发展企业日常办公越来越依赖互联网。然而&#xff0c;终端及普通PC在访问互联网过程中&#xff0c;会面临各种不容忽视的风险。这些风险包括&#xff1a; 员工主动故意的数据泄漏&#xff1a;员工可能故意泄露敏感信息。后台应用程序外发信息&#xff1a;一些应用程序…

代码覆盖率:衡量测试的有效性

在软件开发领域&#xff0c;确保代码的可靠性和稳健性至关重要。实现这一目标的关键实践之一是通过测试。但是&#xff0c;测试本身需要进行测量和评估&#xff0c;以确保其有效性。这就是代码覆盖率发挥作用的地方。代码覆盖率是一种指标&#xff0c;它量化了测试期间程序源代…

Qt正则表达式

需求&#xff1a;对输入的内容进行限制 只能以字母或下划线开始不能以数字开始 不能有中文 字母&#xff0c;数字&#xff0c;下划线混合使用 QRegExp rx("^[A-Za-z_][A-Za-z0-9_]*$");QRegExpValidator validator(rx);QLineEdit edit;edit.setValidator(&va…