如何控制滚动条滚动到指定位置后，整体固定，滚动条控制某一元素移动，元素移动完成后整体才可以继续往下滑，求求大佬们指点!!!o(╥﹏╥)o

如何实现滚动条滚动到指定位置后页面固定，元素继续移动？

AI BotBETA

要实现滚动条滚动到指定位置后页面固定，同时控制某一元素继续移动，并在该元素移动完成后允许页面继续滚动的效果，你可以通过结合CSS的position属性和JavaScript的滚动事件监听以及元素动画（如使用CSS动画或JavaScript动画）来实现。以下是一个基本的实现思路：

1. HTML结构

首先，定义你的HTML结构。例如，假设你有一个固定高度的容器，和一个需要在页面固定时继续滚动的元素。

<div id="container" style="height: 100vh; overflow: hidden; position: relative;">
    <div id="scrollable-content" style="overflow-y: auto; height: 100%; position: absolute; width: 100%;">
        <!-- 这里是页面的内容 -->
        <div id="fixed-point" style="height: 1000px; background-color: lightgrey;">滚动到这里时页面固定</div>
        <div id="move-on-scroll" style="height: 500px; background-color: skyblue;">这个元素在页面固定时继续移动</div>
        <!-- 后续内容 -->
    </div>
</div>

2. CSS样式

上面的CSS样式是基础设置，你可能需要根据实际情况调整。

3. JavaScript逻辑

使用JavaScript来监听滚动事件，并在滚动到特定位置时锁定页面滚动，同时让指定元素继续移动。

let isScrollingFixed = false;
let startScrollPosition = 0;
let moveElement = document.getElementById('move-on-scroll');
let scrollableContent = document.getElementById('scrollable-content');

scrollableContent.addEventListener('scroll', function(e) {
    if (!isScrollingFixed) {
        const scrollTop = this.scrollTop;
        const fixedElement = document.getElementById('fixed-point');
        const fixedElementTop = fixedElement.offsetTop - scrollableContent.offsetTop;

        if (scrollTop >= fixedElementTop - scrollableContent.clientHeight) {
            // 页面滚动到指定位置，开始固定页面并控制元素移动
            isScrollingFixed = true;
            startScrollPosition = scrollTop;

            // 这里可以添加代码来控制 moveElement 的移动
            // 例如，使用CSS动画或JavaScript动画

            // 假设使用setTimeout模拟动画完成
            setTimeout(() => {
                // 动画完成后重置状态，允许页面继续滚动
                isScrollingFixed = false;
                // 可以在这里将滚动位置调整到合适的位置
                // 例如：scrollableContent.scrollTop = startScrollPosition + someOffset;
            }, 2000); // 假设动画持续时间为2000毫秒
        }
    }

    // 如果isScrollingFixed为true，并且需要控制moveElement的滚动位置，
    // 这里可以添加代码来更新moveElement的transform属性或其他方式来实现动态移动
});

注意：

上面的代码是一个简化的示例，实际中你可能需要处理更多的边界情况和动画效果。
scrollTop、offsetTop和clientHeight等属性可能需要根据实际的DOM结构和CSS样式进行调整。
考虑到性能和用户体验，你可能需要添加防抖（debounce）或节流（throttle）逻辑到滚动事件监听器中，以避免因频繁触发而导致的性能问题。
如果元素move-on-scroll的移动需要复杂的动画效果，建议使用CSS动画或JavaScript动画库（如GSAP）来实现。

2 个回答

得票最新

陟上晴明

21.7k145291

发布于
2024-09-18 浙江

我当时的一个全屏滚动项目是用的 swiper.js，用的嵌套滚动实现的。

大概写了个Demo

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    />

    <!-- Demo styles -->
    <style>
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .swiper-v {
        background: #eee;
      }
    </style>
  </head>

  <body>
    <!-- Swiper -->

    <div class="swiper mySwiper swiper-h">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Vertical Slide 1</div>
        <div class="swiper-slide">
          <div class="swiper mySwiper2 swiper-v">
            <div class="swiper-wrapper">
              <div class="swiper-slide">Vertical Slide 2-1</div>
              <div class="swiper-slide">Vertical Slide 2-2</div>
              <div class="swiper-slide">Vertical Slide 2-3</div>
              <div class="swiper-slide">Vertical Slide 2-4</div>
              <div class="swiper-slide">Vertical Slide 2-5</div>
            </div>
          </div>
        </div>
        <div class="swiper-slide">Vertical Slide 3</div>
        <div class="swiper-slide">Vertical Slide 4</div>
      </div>
      <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        direction: "vertical",
        spaceBetween: 50,
        mousewheel: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
      var swiper2 = new Swiper(".mySwiper2", {
        direction: "vertical",
        spaceBetween: 50,
        mousewheel: true,
        nested: true
      });
    </script>
  </body>
</html>