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

Question

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

Answer 1

要实现滚动条滚动到指定位置后页面固定，同时控制某一元素继续移动，并在该元素移动完成后允许页面继续滚动的效果，你可以通过结合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）来实现。