如何在Chrome中获取refCurrent.scrollTop最大值？替代scrollTopMax

Chrome的Element.scrollTopMax属于非标准属性，要替代它，你可以通过标准属性计算出scrollTop的最大值：元素的scrollHeight减去clientHeight。

原理很直白：

• scrollHeight是元素内容的总高度（包含超出可视区域的部分）
• clientHeight是元素可视区域的高度
• 两者的差值就是滚动条能滚动的最大距离，也就是scrollTop的最大值

结合你的React组件，修改后的代码示例如下：

const SecondTab = () => {
  const refS = useRef(null);
  const [scrollValue, setScrollValue] = useState(0);
  const [scrollMax, setScrollMax] = useState(0); // 新增状态存储最大值

  const scrollHandler = (e) => {
    const refCurrent = refS.current;
    if (!refCurrent) return;
    
    const currentScrollTop = refCurrent.scrollTop;
    const currentScrollMax = refCurrent.scrollHeight - refCurrent.clientHeight;
    
    setScrollValue(currentScrollTop);
    setScrollMax(currentScrollMax); // 更新最大值
  };

  // 组件挂载时初始化最大值
  useEffect(() => {
    const refCurrent = refS.current;
    if (refCurrent) {
      setScrollMax(refCurrent.scrollHeight - refCurrent.clientHeight);
    }
  }, []);

  return (
    <div className={Style.title} ref={refS} onScrollCapture={scrollHandler}>
      <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipisicing
      elit. Beatae eveniet debitis accusamus praesentium eius voluptas
      {/* 可添加更多内容让元素产生滚动效果 */}
    </div>
  );
};

如果不需要把最大值存入状态，也可以在需要时直接计算：

const getScrollMax = () => {
  const refCurrent = refS.current;
  return refCurrent ? refCurrent.scrollHeight - refCurrent.clientHeight : 0;
};

这个方法是W3C标准实现，所有现代浏览器都支持，完全可以替代非标准的scrollTopMax。

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