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

html 复制代码
<!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中的每个项目占满视口高度,页面可以通过自动或手动方式平滑滚动这些项目。
相关推荐
dy17172 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918416 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂7 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技7 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip7 小时前
JavaScript二叉树相关概念
前端
rannn_1117 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
一朵梨花压海棠go8 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x8 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java8 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)8 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5