Great question! Dealing with inconsistent deltaY values across different mice (especially those with smooth scrolling) is a huge pain point when building interactive web features like video scrubbing or zooming. The bad news is there’s no direct JavaScript API to detect the exact type of mouse connected—but the good news is we can work around this with dynamic calibration and behavioral detection. Let’s walk through practical solutions:

1. Dynamic Calibration via Initial Scroll Samples #

Instead of hardcoding a coefficient, let’s let the user’s first few scrolls tell us what coefficient to use. Smooth-scroll mice typically output much larger deltaY values (like your 16000 example) in fewer events, while regular mice output smaller, more frequent values. We can collect a small sample of initial scrolls to calculate an average, then adjust our coefficient accordingly.

Here’s a working example:

let scrollSamples = [];
let isCalibrated = false;
let scrollCoefficient = 1000; // Default for regular mice

function handleWheel(e) {
  // Skip calibration if we're already done
  if (!isCalibrated) {
    // Collect absolute deltaY values (ignore direction)
    scrollSamples.push(Math.abs(e.deltaY));
    
    // Once we have 5 samples, calculate the average
    if (scrollSamples.length >= 5) {
      const avgDelta = scrollSamples.reduce((total, val) => total + val, 0) / scrollSamples.length;
      
      // Scale the coefficient based on the average - tweak the multiplier to fit your needs
      scrollCoefficient = avgDelta * 0.0625; 
      
      isCalibrated = true;
      scrollSamples = []; // Clean up memory
    }
  }

  // Use the calibrated coefficient for your video logic
  targetOffset += e.deltaY / scrollCoefficient;
  
  // Rest of your video manipulation code (e.g., seek to targetOffset)
}

window.addEventListener('wheel', handleWheel);

This approach automatically adapts to any mouse type, no manual configuration needed.

2. Behavioral Detection via Scroll Event Frequency #

Smooth-scroll mice tend to fire far more wheel events per physical scroll than regular mice. We can track how many events fire in a short window to guess if we’re dealing with a smooth-scroll device.

Check out this implementation:

let eventCounter = 0;
let lastCheckTime = Date.now();
let scrollCoefficient = 1000;

function handleWheel(e) {
  const now = Date.now();
  eventCounter++;

  // Check event count every 100ms
  if (now - lastCheckTime >= 100) {
    // If we get more than 10 events in 100ms, it's likely smooth scroll
    if (eventCounter > 10) {
      scrollCoefficient = 16000;
    } else {
      scrollCoefficient = 1000;
    }
    
    // Reset counter and timer
    eventCounter = 0;
    lastCheckTime = now;
  }

  targetOffset += e.deltaY / scrollCoefficient;
  // ... your video code
}

window.addEventListener('wheel', handleWheel);

This is a lightweight way to adapt on the fly, even if the user switches mice mid-session (though that’s rare!).

3. Add a Manual Override (Fallback) #

No automatic detection is perfect—some users might have weird setups or just prefer a different sensitivity. Adding a simple toggle (e.g., "Smooth Scroll Mouse" checkbox) lets users manually set the coefficient if the auto-detection gets it wrong.

Example UI snippet (with JS):

<label>
  <input type="checkbox" id="smoothScrollToggle">
  I'm using a smooth-scroll mouse
</label>

document.getElementById('smoothScrollToggle').addEventListener('change', (e) => {
  scrollCoefficient = e.target.checked ? 16000 : 1000;
});

This is a great way to cover edge cases and improve user experience.

Final Notes #

There’s no foolproof way to detect mouse hardware directly, but combining dynamic calibration with behavioral checks (plus a manual fallback) will handle 99% of real-world scenarios. Test with different mice to tweak the sample counts and scaling factors to match your video’s desired responsiveness!

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