如何让页面指定section实现全屏视差滚动，其余区域保持正常滚动？

需求与问题 #

• 需求：当页面中特定的special-section进入视口时，实现全屏/视差滚动效果，页面其余section保持正常滚动行为。
• 挑战：每个section都是独立组件，可在页面中任意排序。
• 当前问题：尝试通过fixed定位实现，但用户体验卡顿，慢速滚动场景下失效。

核心问题分析 #

之前的实现存在以下问题：

• 高频scroll事件监听导致性能损耗，触发大量重绘重排
• fixed定位切换时的布局突变引发卡顿
• 手动scrollBy的硬编码偏移量不准确，导致滚动衔接不自然

优化方案 #

改用Intersection Observer监听视口交叉状态，结合滚动锁定逻辑，避免高频事件和布局突变：

修改后的代码 #

HTML（无需改动）

<!DOCTYPE html>
<head>
    <title>Scroll Test</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <div class="section"><span class="big-font">#1</span></div>
        <div class="section"><span class="big-font">#2</span></div>
        <div class="section"><span class="big-font">#3</span></div>
        <div class="section"><span class="big-font">#4</span></div>
        <div id="specialSection" class="section special-section">
            <div id="specialWrapper" class="special-wrapper">
                <div class="box">
                    #Box 1
                </div>
                <div class="box">
                    #Box 2
                </div>
                <div class="box">
                    #Box 3
                </div>
            </div>
        </div>
        <div class="section"><span class="big-font">#5</span></div>
        <div class="section"><span class="big-font">#6</span></div>
        <div class="section"><span class="big-font">#7</span></div>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS

.big-font {
    font-size: 36px;
}
body {
    margin: 0;
    padding: 0;
    background-color: #353535;
    overflow-y: scroll;
    transition: overflow 0.1s ease;
}
body.scroll-locked {
    overflow-y: hidden;
}
.box {
    width: 100%;
    height: 450px;
    background-color: burlywood;
    margin: 0 auto;
    border: 2px solid #000;
    margin-bottom: 1px;
}
.section {
    min-height: 250px;
    border: 1px solid #cccccc;
    padding: 30px;
}
.special-section {
    position: relative;
    padding: 0;
    min-height: 100vh;
    background-color: #543333;
}
.special-section.in-view {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}
.special-wrapper{
    width: 100%;
    height: 100%;
    border: 1px dotted white;
    overflow-y: auto;
}

JavaScript

const specialSection = document.getElementById('specialSection');
const specialWrapper = document.getElementById('specialWrapper');
const body = document.body;

// 配置Intersection Observer，监听特殊区块进入视口的状态
const observerOptions = {
    root: null,
    rootMargin: '0px',
    threshold: 0.5 // 当50%进入视口时触发
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            body.classList.add('scroll-locked');
            specialSection.classList.add('in-view');
            specialWrapper.focus();
        } else {
            body.classList.remove('scroll-locked');
            specialSection.classList.remove('in-view');
        }
    });
}, observerOptions);

observer.observe(specialSection);

// 监听特殊区块内部滚动，到达边界时恢复页面滚动
specialWrapper.addEventListener('scroll', () => {
    const { scrollTop, scrollHeight, clientHeight } = specialWrapper;
    
    // 滚动到底部
    if (scrollTop + clientHeight >= scrollHeight - 5) {
        body.classList.remove('scroll-locked');
        specialSection.classList.remove('in-view');
        setTimeout(() => {
            window.scrollTo({
                top: specialSection.offsetTop + specialSection.offsetHeight,
                behavior: 'smooth'
            });
        }, 100);
    }
    
    // 滚动到顶部
    if (scrollTop <= 5) {
        body.classList.remove('scroll-locked');
        specialSection.classList.remove('in-view');
        setTimeout(() => {
            window.scrollTo({
                top: specialSection.offsetTop,
                behavior: 'smooth'
            });
        }, 100);
    }
});

关键优化点 #

• Intersection Observer替代scroll事件：异步监听视口交叉状态，避免高频事件导致的性能损耗，慢速滚动下也能稳定触发。
• position:sticky替代fixed：减少布局突变，sticky定位不脱离文档流，避免重绘重排卡顿。
• 平滑滚动衔接：使用window.scrollTo配合behavior:'smooth'替代硬编码偏移，滚动衔接更自然。
• 滚动锁定过渡：给body的overflow添加过渡效果，避免锁定/解锁时的突兀感。

内容的提问来源于stack exchange，提问作者Stacy J