如何在iOS上实现多张Parallax（视差）图片效果

我在适配网站iOS端时，遇到了多张视差图片的实现问题——iOS不支持background-attachment: fixed属性，尝试过单张图的视差方案，但无法满足多张图片依次呈现视差效果的需求。当前使用的代码如下：

原CSS代码 #

.parallax1 {
  background-image: url("images/index/practitioners.png");
  height: 35vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.parallax2 {
  background-image: url("images/index/consumers.png");
  height: 35vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.parallax3 {
  background-image: url("images/index/network.png");
  height: 35vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

原HTML代码 #

<a href="practitioners.html" class="paralink"><div class="parallax1"></div></a>
   <div align="center">
     <p class="pagehead" style="color: #000; width: 50%;">Learn the philosophy and products CArx uses to heal.</p>
   </div>
    
<a href="consumers.html" class="paralink"><div class="parallax2"></div></a>
   <div align="center">
     <p class="pagehead" style="color: #000; width: 50%;">Information about the Cellular Alchemy Elite program and transform your home into an oasis of wellness and vitality with the latest scientific innovations in health validated for their efficacy.</p>
</div>

<a href="network.html" class="paralink"><div class="parallax3"></div></a>
   <div align="center">
     <p class="pagehead" style="color: #000; width: 50%;">See who CArx partners with to bring whole body wellness to life.</p>
</div>

兼容iOS的解决方案 #

放弃依赖background-attachment: fixed，改用独立图片元素配合JavaScript监听滚动的方式实现视差，完全支持多张图片依次展示，且适配iOS设备。

修改后的HTML结构 #

将背景图替换为img标签，放在带溢出隐藏的容器内，文字区块独立出来：

<div class="parallax-group">
  <a href="practitioners.html" class="paralink">
    <div class="parallax-wrap">
      <img src="images/index/practitioners.png" alt="Practitioners" class="parallax-img">
    </div>
  </a>
  <div class="text-section">
    <p class="pagehead" style="color: #000; width: 50%;">Learn the philosophy and products CArx uses to heal.</p>
  </div>
</div>

<div class="parallax-group">
  <a href="consumers.html" class="paralink">
    <div class="parallax-wrap">
      <img src="images/index/consumers.png" alt="Consumers" class="parallax-img">
    </div>
  </a>
  <div class="text-section">
    <p class="pagehead" style="color: #000; width: 50%;">Information about the Cellular Alchemy Elite program and transform your home into an oasis of wellness and vitality with the latest scientific innovations in health validated for their efficacy.</p>
  </div>
</div>

<div class="parallax-group">
  <a href="network.html" class="paralink">
    <div class="parallax-wrap">
      <img src="images/index/network.png" alt="Network" class="parallax-img">
    </div>
  </a>
  <div class="text-section">
    <p class="pagehead" style="color: #000; width: 50%;">See who CArx partners with to bring whole body wellness to life.</p>
  </div>
</div>

修改后的CSS样式 #

设置容器布局，确保图片超出部分隐藏，文字区块居中：

.parallax-group {
  margin: 4rem 0; /* 自定义区块间距 */
}

.parallax-wrap {
  height: 35vh;
  overflow: hidden;
  position: relative;
}

.parallax-img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  min-height: 100%;
  object-fit: cover; /* 保持图片比例，避免拉伸 */
}

.text-section {
  text-align: center;
  padding: 2rem 0;
}

JavaScript实现视差逻辑 #

监听滚动事件，计算每个图片的偏移量，模拟视差效果：

const parallaxImgs = document.querySelectorAll('.parallax-img');

// 滚动监听函数
function handleParallax() {
  parallaxImgs.forEach(img => {
    const wrap = img.closest('.parallax-wrap');
    const wrapTop = wrap.getBoundingClientRect().top;
    const windowHeight = window.innerHeight;
    
    // 计算视差偏移量，数值50可调整，越大视差效果越强
    const offset = ((windowHeight - wrapTop) / windowHeight) * 50 - 25;
    img.style.transform = `translateX(-50%) translateY(${offset}px)`;
  });
}

// 绑定滚动事件
window.addEventListener('scroll', handleParallax);
// 页面加载时初始化位置
window.addEventListener('load', handleParallax);

优化说明 #

• 调整JavaScript中的50数值可以控制视差强度，数值越大，图片滚动偏移幅度越大。
• 若需要更平滑的动画，可给.parallax-img添加transition: transform 0.15s ease-out;，但注意避免过度动画导致滚动卡顿。
• 使用object-fit: cover确保图片比例正确，不会因容器尺寸拉伸变形。

内容的提问来源于stack exchange，提问作者Justin H