移动端规避background-attachment:fixed的JavaScript实现方案咨询

Got it, that fixed background parallax effect looks awesome on desktop, but yeah—mobile browsers have spotty support for background-attachment: fixed (especially iOS Safari). Let's build a JavaScript workaround that replicates the exact behavior you want, without losing that cool scroll effect.

The Core Idea #

Instead of relying on the browser's native fixed background, we'll dynamically adjust the background position of each .img div as the user scrolls. This makes the background image stay locked relative to the viewport, just like fixed does on desktop.

Step-by-Step Implementation #

1. Base HTML & CSS (Adjusted for Mobile)

First, update your CSS to remove background-attachment: fixed (since it won't work on mobile) and set up the basic structure:

<!-- Your existing structure -->
<div class="img img1"></div>
<div class="info"></div>
<div class="img img2"></div>
<div class="info"></div>
<div class="img img3"></div>

/* Base styles */
.img {
  height: 500px; /* Your fixed height */
  background-size: cover;
  background-position: center center;
  /* Remove background-attachment: fixed here */
}

.info {
  height: 400px; /* Your fixed height */
  background-color: #f0f0f0; /* Your solid background */
}

/* Individual background images */
.img1 { background-image: url('your-image-1.jpg'); }
.img2 { background-image: url('your-image-2.jpg'); }
.img3 { background-image: url('your-image-3.jpg'); }

2. JavaScript Logic

We'll listen for the scroll event, calculate how far each .img element is from the top of the viewport, and adjust its background position to simulate the fixed effect. We'll also add a throttle to avoid performance issues:

// Throttle function to limit scroll event frequency (prevents jank)
function throttle(func, limit) {
  let inThrottle;
  return function() {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  }
}

// Function to update background positions
function updateFixedBackgrounds() {
  const scrollY = window.scrollY;
  const imgs = document.querySelectorAll('.img');

  imgs.forEach(img => {
    // Get the distance from the top of the page to the img element
    const imgOffsetTop = img.offsetTop;
    // Calculate how much the background should move to stay fixed relative to viewport
    const bgPositionY = scrollY - imgOffsetTop;
    // Apply the background position (negative value locks it in place)
    img.style.backgroundPositionY = `${-bgPositionY}px`;
  });
}

// Attach throttled scroll event listener (runs ~60fps)
window.addEventListener('scroll', throttle(updateFixedBackgrounds, 16));

// Initial run to set positions correctly on page load
updateFixedBackgrounds();

How It Works #

• Throttle Function: Limits how often our update logic runs (every 16ms, matching 60fps) to prevent lag on low-powered mobile devices.
• Scroll Calculation: For each .img div, we calculate how far the user has scrolled past the element's top edge. Setting backgroundPositionY to the negative of that value keeps the background locked to the viewport.
• Initial Run: Ensures backgrounds are positioned correctly as soon as the page loads, no scroll required.

Bonus: Performance Optimization with Intersection Observer #

If you have lots of .img elements, using Intersection Observer to only update elements in the viewport saves resources:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      activeImgs.add(entry.target);
    } else {
      activeImgs.delete(entry.target);
    }
  });
}, { threshold: 0.1 });

// Track only images that are visible (or nearly visible)
const activeImgs = new Set();

// Observe all .img elements
document.querySelectorAll('.img').forEach(img => observer.observe(img));

// Update only active images in scroll handler
function updateFixedBackgrounds() {
  const scrollY = window.scrollY;
  activeImgs.forEach(img => {
    const imgOffsetTop = img.offsetTop;
    const bgPositionY = scrollY - imgOffsetTop;
    img.style.backgroundPositionY = `${-bgPositionY}px`;
  });
}

This way, we skip calculations for images that are off-screen, making the effect smoother on mobile.

Testing Tips #

• Test on both Android and iOS (iOS Safari has historically been the trickiest with fixed backgrounds).
• Adjust the height values in your CSS to match your original design.
• If your background images need horizontal centering, keep backgroundPositionX: center in your CSS—we only modify the Y axis here.

内容的提问来源于stack exchange，提问作者D-Man