滚动时图片Y轴缩放并固定顶部的实现问题

问题根源 #

1. 原代码仅处理了缩放逻辑，未设置元素固定定位，导致滚动时图片随页面移动
2. 使用getBoundingClientRect().height获取实时高度，缩放后高度动态变化，会导致比例计算异常

修正方案 #

1. 预存初始高度 #

页面加载时保存每个元素的原始高度，避免缩放后高度变化干扰计算

2. 启用粘性定位 #

通过position: sticky; top: 0让元素滚动到顶部后自动固定

3. 优化缩放计算 #

基于初始高度和元素视口位置计算Y轴缩放比例，限制比例在0-1区间内

完整可运行代码 #

document.addEventListener('DOMContentLoaded', () => {
    const sections = document.querySelectorAll('div');
    // 预存每个元素的初始高度
    const initialHeights = Array.from(sections).map(sec => sec.offsetHeight);

    window.addEventListener('scroll', () => {
        sections.forEach((section, idx) => {
            const rect = section.getBoundingClientRect();
            const initialH = initialHeights[idx];
            // 计算元素顶部超出视口的距离
            const overflowTop = rect.top;
            // 计算Y轴缩放比例：剩余可见高度 / 初始高度
            let scaleY = (initialH + overflowTop) / initialH;
            // 限制比例范围，避免异常值
            scaleY = Math.max(0, Math.min(1, scaleY));

            // 应用样式
            section.style.position = 'sticky';
            section.style.top = '0';
            section.style.transform = `scale3d(1, ${scaleY}, 1)`;
            // 确保缩放从顶部开始
            section.style.transformOrigin = 'top center';
        });
    });
});

关键细节 #

• 粘性定位：sticky定位是实现元素固定顶部的最优方案，无需手动计算和更新位置
• 初始高度缓存：offsetHeight获取的是元素加载时的原始高度，不受后续缩放影响
• transform-origin：设置为top center保证缩放从元素顶部中心开始，符合目标效果
• 性能优化：如果页面元素较多，建议给滚动事件添加节流处理（比如用requestAnimationFrame），减少重绘次数

内容的提问来源于stack exchange，提问作者Birk Marcus