蒙版图片滚动缩放效果实现问题：无法完全缩放及元素偏移

问题描述 #

尝试实现滚动时元素（裁剪后的文本/形状）逐步放大至填满视口的效果，目前存在两个问题：

1. 无法完成完全缩放，元素无法填满整个视口；
2. 滚动缩放过程中，整个包含div会随之滚动移位。
   当前使用的缩放断点为document.body.clientWidth / imgElement.clientHeight，未找到合适的替代方案。

目标效果参考：滚动页面时，页面中的文字（或裁剪形状）逐渐放大至填满整个视口，放大完成后，后续内容平滑衔接并随页面滚动。

问题分析与修复方案 #

核心问题 #

1. 完全缩放失败：原断点计算逻辑错误，未考虑元素的宽高比与视口的匹配关系，导致缩放倍数不足以让元素填满视口。
2. 容器滚动移位：切换绝对定位时的top值计算不准确，且元素缩放未设置原点，导致裁剪元素偏移，连带容器滚动。

修复后的完整代码 #

HTML

<div class="zoom">
  <h2>i</h2>
</div>
<div class="afterzoom">
    <p>这部分应该在上方元素完全缩放后出现。</p>
</div>

CSS

body {
    margin: 0;
    overflow-x: hidden; /* 避免缩放时出现横向滚动条 */
}

h2 {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5em;
  text-transform: uppercase;
  background: url(https://24.media.tumblr.com/tumblr_m87dri70zh1qzla33o1_500.gif);
  background-size: cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform-origin: center center; /* 确保缩放以中心为原点，避免偏移 */
}

.zoom {
  height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.afterzoom {
  position: relative;
  height: 100vh;
  width: 100%;
  background: red;
  margin-top: 100vh; /* 初始位置固定在视口下方 */
}

JavaScript

const zoomElement = document.querySelector('.zoom')
const afterZoomElement = document.querySelector('.afterzoom')
const imgElement = document.querySelector('h2')
const ZOOM_SPEED = 200 // 值越小，滚动时缩放速度越快
const FADE_SPEED = 400 // 值越小，淡入淡出速度越快

// 动态获取视口与元素尺寸，避免初始加载的尺寸偏差
function getDimensions() {
  const viewportWidth = window.innerWidth
  const viewportHeight = window.innerHeight
  const elementRect = imgElement.getBoundingClientRect()
  const elementWidth = elementRect.width
  const elementHeight = elementRect.height

  // 计算让元素刚好填满视口的最小缩放倍数（取宽高比例的最大值）
  const scaleX = viewportWidth / elementWidth
  const scaleY = viewportHeight / elementHeight
  const ZOOM_BREAKPOINT = Math.max(scaleX, scaleY)
  
  // 计算滚动到完全缩放所需的滚动距离
  const SCROLL_TO_FULL_ZOOM = ZOOM_BREAKPOINT * ZOOM_SPEED

  return {
    viewportWidth,
    viewportHeight,
    elementWidth,
    elementHeight,
    ZOOM_BREAKPOINT,
    SCROLL_TO_FULL_ZOOM
  }
}

let dims = getDimensions()
let fade = 1
let prevScroll = 0

// 窗口大小变化时重新计算尺寸，保证响应式适配
window.addEventListener('resize', () => {
  dims = getDimensions()
})

function anim() {
  const scroll = window.scrollY
  // 确保缩放倍数不小于1（初始状态）
  const zoom = Math.max(1, scroll / ZOOM_SPEED)

  // 处理缩放与定位逻辑
  if (zoom < dims.ZOOM_BREAKPOINT) {
    imgElement.style.transform = `scale(${zoom})`
    zoomElement.style.position = 'fixed'
    zoomElement.style.top = '0'
    // 保持后续内容在视口下方
    afterZoomElement.style.position = 'relative'
    afterZoomElement.style.top = '0'
  } else {
    // 固定缩放倍数到最大值，确保元素填满视口
    imgElement.style.transform = `scale(${dims.ZOOM_BREAKPOINT})`
    // 切换为绝对定位，让元素随滚动移动
    zoomElement.style.position = 'absolute'
    // 计算正确的top值：滚动距离 - 完全缩放所需滚动距离 + 视口与缩放后元素的垂直居中偏移
    const scaledElementHeight = dims.elementHeight * dims.ZOOM_BREAKPOINT
    zoomElement.style.top = `${scroll - dims.SCROLL_TO_FULL_ZOOM + (dims.viewportHeight - scaledElementHeight) / 2}px`
    // 调整后续内容位置，紧贴缩放元素下方
    afterZoomElement.style.position = 'absolute'
    afterZoomElement.style.top = `${scroll - dims.SCROLL_TO_FULL_ZOOM + scaledElementHeight / 2 + dims.viewportHeight / 2}px`
  }

  // 处理淡入淡出逻辑
  const scrollDiff = prevScroll - scroll
  if (zoom < dims.ZOOM_BREAKPOINT - FADE_SPEED / ZOOM_SPEED) {
    fade = 1
  } else if (zoom > dims.ZOOM_BREAKPOINT) {
    fade = 0
  } else {
    // 限制fade值在0-1之间，避免透明度异常
    fade = Math.max(0, Math.min(1, fade + scrollDiff / FADE_SPEED))
  }
  zoomElement.style.opacity = fade
  prevScroll = scroll
}

// 重置页面加载时的滚动位置
if ('scrollRestoration' in history) {
  history.scrollRestoration = 'manual'
}

// 监听滚动事件，使用requestAnimationFrame保证动画流畅
document.addEventListener('scroll', () => window.requestAnimationFrame(anim))

关键修复说明 #

• 正确的缩放断点：通过计算元素宽高与视口宽高的比例，取最大值作为完全缩放倍数，确保元素能刚好填满视口。
• 缩放原点控制：给目标元素添加transform-origin: center center，保证缩放时元素居中，避免裁剪的文本/形状偏移。
• 定位逻辑优化：切换绝对定位时动态计算top值，确保元素位置稳定，不会随滚动移位；后续内容的位置也根据缩放元素的尺寸动态调整，保证衔接平滑。
• 响应式适配：添加窗口resize监听，重新计算尺寸，确保窗口大小变化时效果正常。

内容的提问来源于stack exchange，提问作者mr.Hritik