Great question! I’ve wrestled with this exact problem when trying to sync UI animations with native smooth scrolling—let’s break down what you need to know.

First: Native Smooth Scroll Durations Aren’t Fixed #

Browsers don’t use a hardcoded duration for behavior: 'smooth'; instead, they calculate it dynamically based on the scroll distance. Here’s how the major browsers handle it:

• Chrome/Edge: Short scrolls (hundreds of pixels) take ~200–300ms. Longer scrolls (thousands of pixels) scale up but cap at around 1000ms (1 second). The algorithm uses an ease-in-out curve that prioritizes faster completion for longer distances without feeling jarring.
• Firefox: Similar dynamic logic, but with a slightly higher cap—long scrolls can take up to ~1200ms. Short distances still land in the 200–300ms range.
• Safari: Tends to be faster overall. Short scrolls take ~150–250ms, and long scrolls top out at ~800ms. Its easing feels more "snappy" compared to Chromium-based browsers.

Better Alternatives to Scroll Event Listeners #

Instead of fighting with frequent scroll callbacks, here are three practical solutions to sync your color transition:

1. Approximate Native Duration (Simple & Performant) #

Calculate a close-enough duration based on scroll distance, then use that to sync your color transition. This avoids scroll events entirely:

const targetTop = 0; // Your desired scroll position
const scrollDistance = Math.abs(window.scrollY - targetTop);

// Mimic native behavior: min 200ms, max 1000ms, scale with distance
const scrollDuration = Math.min(200 + scrollDistance * 0.1, 1000);

// Trigger smooth scroll
window.scrollTo({ top: targetTop, behavior: 'smooth' });

// Sync color transition
const targetElement = document.querySelector('.your-element');
targetElement.style.transition = `color ${scrollDuration}ms ease`;
targetElement.style.color = '#ff0000'; // Your new color

This works for most use cases—users won’t notice the tiny gap between native scroll and your color transition.

2. Use Intersection Observer (Precise, No Scroll Events) #

If you need color to update based on element visibility rather than raw scroll position, IntersectionObserver is way more performant than scroll listeners. It fires callbacks only when your element crosses predefined visibility thresholds:

const targetElement = document.querySelector('.your-element');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // Calculate color based on how much of the element is visible
    const visibilityRatio = entry.intersectionRatio;
    const red = Math.floor(255 * visibilityRatio);
    const blue = Math.floor(255 * (1 - visibilityRatio));
    targetElement.style.color = `rgb(${red}, 100, ${blue})`;
  });
}, {
  // Set multiple thresholds to trigger updates more smoothly
  threshold: Array.from({ length: 20 }, (_, i) => i / 20)
});

observer.observe(targetElement);

// Trigger your smooth scroll as usual
window.scrollTo({ top: 0, behavior: 'smooth' });

This avoids the performance hit of scroll events entirely and keeps your color in sync with the element’s position relative to the viewport.

3. Custom Smooth Scroll (Full Control) #

If you need pixel-perfect synchronization, ditch native smooth scroll and implement your own with requestAnimationFrame. This lets you define an exact duration to match your color transition:

function smoothScrollTo(targetTop, duration = 600) {
  const startTop = window.scrollY;
  const distance = targetTop - startTop;
  let startTime = null;

  const animateScroll = (currentTime) => {
    if (!startTime) startTime = currentTime;
    const timeElapsed = currentTime - startTime;
    const progress = Math.min(timeElapsed / duration, 1);

    // Use an ease-in-out curve to mimic native behavior
    const easedProgress = progress < 0.5 
      ? 2 * progress * progress 
      : 1 - Math.pow(-2 * progress + 2, 2) / 2;

    window.scrollTo(0, startTop + distance * easedProgress);

    if (timeElapsed < duration) {
      requestAnimationFrame(animateScroll);
    }
  };

  requestAnimationFrame(animateScroll);

  // Sync color transition with your custom duration
  const targetElement = document.querySelector('.your-element');
  targetElement.style.transition = `color ${duration}ms ease`;
  targetElement.style.color = '#00ff00'; // Your new color
}

// Use the custom scroll function
smoothScrollTo(0, 600); // 600ms duration, fully synchronized

The tradeoff here is that native scroll has some under-the-hood optimizations (like hardware acceleration), but this method gives you full control over timing.

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