自定义滚动功能Chrome失效、Firefox精度异常求助

Hey Pierre, let's break down the two main problems you're facing—gradual pixel drift in your fixed-point scrolling and total failure in Chrome—and walk through actionable fixes.

1. Why Pixel Drift Happens (and How to Fix It) #

That creeping offset is almost always caused by cumulative relative calculation errors. If your code uses something like scrollTop += stepSize to move between points, tiny decimal pixel values (which browsers often use for sub-pixel rendering) add up over time, pushing you further from your intended anchors.

Fix Steps: #

• Use absolute target positions, not relative offsets: Precompute the exact Y-coordinate of each scroll anchor once (on page load or resize), then jump directly to those values instead of adjusting from the current scroll position.
• Round pixel values: When setting scroll positions, use Math.round() or Math.floor() to eliminate sub-pixel discrepancies that accumulate over scrolls.

Example of precomputing anchor positions:

// Store absolute positions of your scroll targets on page load
const scrollAnchors = Array.from(document.querySelectorAll('.your-anchor-class')).map(anchor => {
  // Get accurate absolute top position (accounts for scroll and fixed elements)
  return anchor.getBoundingClientRect().top + window.pageYOffset;
});

2. Why Chrome Isn't Working (and the Fix) #

Chrome enforces strict rules around passive event listeners for scroll/wheel events by default. If your code uses e.preventDefault() to block native scrolling but didn't explicitly set { passive: false } when adding the listener, Chrome will ignore the preventDefault() call—letting native scrolling override your custom logic.

Fix Steps: #

• Explicitly disable passive mode for your wheel/scroll listener: This lets preventDefault() work as intended in Chrome.
• Use wheel instead of scroll events: The scroll event fires after the browser has already scrolled, making it harder to override. The wheel event fires when the user initiates a scroll action, so you can intercept it before native scrolling happens.

Example of a fixed scroll handler:

let currentAnchorIndex = 0;

window.addEventListener('wheel', (e) => {
  // Block native scrolling
  e.preventDefault();
  
  // Determine scroll direction (up = -1, down = 1)
  const scrollDirection = e.deltaY > 0 ? 1 : -1;
  
  // Update anchor index (stay within bounds)
  currentAnchorIndex = Math.max(0, Math.min(scrollAnchors.length - 1, currentAnchorIndex + scrollDirection));
  
  // Jump directly to the absolute anchor position
  window.scrollTo({
    top: scrollAnchors[currentAnchorIndex],
    behavior: 'smooth' // Remove this if you want instant jumps
  });
}, { passive: false }); // Critical for Chrome to respect preventDefault()

Extra Debugging Tips #

• In Chrome DevTools, open the Console and log window.pageYOffset after each scroll to see exactly how far off your position is.
• Check for fixed-position elements (like navbars) that might shift your anchor positions—subtract their height from your target Y-values if needed.
• Test with behavior: 'auto' (instant scroll) first to rule out smooth-scrolling conflicts before re-enabling the smooth behavior.

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