如何限制安卓端Google Chrome内网页或指定div的最大滚动速度？

方案1：指定滚动容器的自定义速度节流（最推荐，不影响其他区域滚动） #

核心逻辑是监听容器的wheel和touchmove事件，对安卓设备单独限制单帧最大滚动位移，超出阈值时截断滚动增量，手动控制容器的scrollTop，React实现参考代码如下：

import { useRef, useEffect } from 'react';

const LimitedScrollContainer = ({ children }) => {
  const containerRef = useRef(null);
  // 安卓端单帧最大滚动像素，可根据实际效果调整为40-80区间
  const maxScrollPerFrame = 60;

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    // 处理鼠标滚轮滚动
    const handleWheel = (e) => {
      // 仅对安卓设备做限制，保留iOS原生滚动体验
      const isAndroid = /Android/i.test(navigator.userAgent);
      if (!isAndroid) return;

      const deltaY = e.deltaY;
      // 截断超出阈值的滚动增量
      const limitedDelta = Math.sign(deltaY) * Math.min(Math.abs(deltaY), maxScrollPerFrame);
      
      e.preventDefault();
      container.scrollTop += limitedDelta;
    };

    // 处理触摸滑动滚动，逻辑和滚轮滚动一致
    const handleTouchMove = (e) => {
      const isAndroid = /Android/i.test(navigator.userAgent);
      if (!isAndroid) return;
      // 可根据touch事件位移差计算滚动增量，逻辑和上述滚轮处理对齐
    };

    container.addEventListener('wheel', handleWheel, { passive: false });
    container.addEventListener('touchmove', handleTouchMove, { passive: false });

    // 组件卸载时移除事件监听避免内存泄漏
    return () => {
      container.removeEventListener('wheel', handleWheel);
      container.removeEventListener('touchmove', handleTouchMove);
    };
  }, []);

  return (
    <div ref={containerRef} style={{ overflowY: 'auto', height: '100vh' }}>
      {children}
    </div>
  );
};

export default LimitedScrollContainer;

方案2：用虚拟滚动彻底解决长列表性能问题 #

限制滚动速度属于治标方案，安卓快滚卡顿的核心原因通常是同时渲染的DOM节点过多，2000条列表项全部挂载在DOM树中会导致渲染压力过大。使用虚拟滚动只渲染可视区域及上下少量缓冲节点，即使是几万条数据也只会同时渲染20-30个DOM节点，完全不会出现滚动掉帧问题。
React生态中可以直接使用成熟的虚拟滚动组件实现，不需要自己从零开发。

方案3：全局滚动速度限制（不推荐） #

如果需要全局限制所有区域的滚动速度，可以监听window的wheel和touchmove事件统一处理，但是会破坏全页面的原生滚动体验，非特殊场景不建议使用。

额外优化建议 #

• 给列表项添加CSS属性content-visibility: auto，让浏览器自动跳过不可见节点的渲染工作，滚动性能可以提升30%以上
• 调整无限滚动的加载触发阈值，距离底部还有1-2屏高度时就提前触发下一批数据加载，避免快滚到底部时才加载导致的卡顿
• 滚动过程中临时禁用列表项的非必要动画、阴影、渐变等耗性能的样式，滚动结束后再恢复

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