网站Parallax视差滚动效果异常问题求助

• 核心问题定位：你的视差逻辑只处理了元素上移，但未限制整体滚动范围，导致滚动超过building-main层高度后出现空白；同时各层偏移计算未与主层高度绑定，仅调整速度无法解决边界问题。

• 关键修复步骤：

  1. 锁定主层有效滚动范围：获取building-main的实际高度，计算出页面能滚动的最大距离（主层高度减去窗口可视高度），记为maxScroll。
  2. 强制限制滚动边界：监听滚动事件时，若当前滚动距离超过maxScroll，直接将页面滚动到maxScroll位置，确保滚动到主层末尾后停止。
  3. 修正视差偏移计算：各层的偏移量基于有效滚动距离计算，避免元素因过度滚动超出主层范围。

• 调整后的代码示例：

  // 获取主层和所有视差层元素
  const mainLayer = document.querySelector('.building-main');
  const parallaxLayers = document.querySelectorAll('.parallax-layer');
  // 计算最大允许滚动距离
  const maxScroll = mainLayer.offsetHeight - window.innerHeight;
  
  window.addEventListener('scroll', () => {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    
    // 限制滚动范围，避免底部空白
    if (scrollTop > maxScroll) {
      window.scrollTo(0, maxScroll);
      scrollTop = maxScroll;
    }
    
    // 更新各视差层位置
    parallaxLayers.forEach(layer => {
      const speed = parseFloat(layer.dataset.speed) || 0.5;
      const yOffset = -scrollTop * speed;
      layer.style.transform = `translateY(${yOffset}px)`;
    });
  });
  

• 额外注意事项：

  • 确保building-main的高度设置合理，不要用height: 100vh，应根据内容或设计需求设置固定高度或自适应高度。
  • 若不同视差层高度差异大，需单独计算每个层的最大偏移量，避免层内容被滚出主层可视范围。
  • 若需要更精细的滚动控制，可给body设置overflow: hidden，配合鼠标滚轮事件自定义滚动逻辑。

内容的提问来源于stack exchange，提问作者Parijat M