如何在React+TypeScript中检测用户是否点击了滚动条？

要区分用户点击的是页面内容还是滚动条，可以通过计算滚动条实际宽度并判断点击位置是否落在滚动条区域内来实现，以下是具体方案：

一、正确获取滚动条宽度 #

你之前得到滚动条宽度为0，大概率是因为用了document.body而非根元素document.documentElement——浏览器的滚动条默认属于html根元素，正确的计算方式是：

const getScrollbarWidth = () => {
  return document.documentElement.offsetWidth - document.documentElement.clientWidth;
};

这个方法会返回当前页面垂直滚动条的宽度（存在时），水平滚动条宽度可通过document.documentElement.offsetHeight - document.documentElement.clientHeight计算。

二、在mousedown事件中判断点击区域 #

在事件回调里，通过event.clientX（点击位置相对于视口的X坐标）判断是否点击垂直滚动条，event.clientY判断水平滚动条：

const handleMouseDown = (event) => {
  const scrollbarWidth = getScrollbarWidth();
  // 无滚动条时直接执行原有逻辑
  if (scrollbarWidth === 0) {
    // 你的业务逻辑
    return;
  }
  // 判断是否点击垂直滚动条
  const isClickVerticalScrollbar = event.clientX > window.innerWidth - scrollbarWidth;
  // 判断是否点击水平滚动条（按需使用）
  const isClickHorizontalScrollbar = event.clientY > window.innerHeight - (document.documentElement.offsetHeight - document.documentElement.clientHeight);
  
  // 仅未点击滚动条时执行原有逻辑
  if (!isClickVerticalScrollbar && !isClickHorizontalScrollbar) {
    // 你的业务逻辑，比如处理页面点击
    console.log("点击了页面内容区域");
  }
};

三、React组件中的完整实现 #

在React组件里，用useEffect绑定/移除事件，避免内存泄漏：

import { useEffect } from 'react';

const YourComponent = () => {
  const getScrollbarWidth = () => {
    return document.documentElement.offsetWidth - document.documentElement.clientWidth;
  };

  const handleMouseDown = (event) => {
    const scrollbarWidth = getScrollbarWidth();
    if (scrollbarWidth === 0) {
      // 无滚动条时执行逻辑
      return;
    }
    const isClickVerticalScrollbar = event.clientX > window.innerWidth - scrollbarWidth;
    const isClickHorizontalScrollbar = event.clientY > window.innerHeight - (document.documentElement.offsetHeight - document.documentElement.clientHeight);
    
    if (!isClickVerticalScrollbar && !isClickHorizontalScrollbar) {
      // 处理非滚动条点击的逻辑
      console.log("触发页面点击逻辑");
    }
  };

  useEffect(() => {
    window.addEventListener('mousedown', handleMouseDown);
    return () => {
      window.removeEventListener('mousedown', handleMouseDown);
    };
  }, []);

  return (
    <div>你的React应用内容</div>
  );
};

export default YourComponent;

补充说明 #

• 如果滚动条属于某个容器（非全局窗口），只需把document.documentElement替换为对应容器的DOM元素即可，逻辑完全一致。
• 对于MacOS默认的重叠式滚动条，clientWidth与offsetWidth的差值依然能正确计算出滚动条占位宽度，不影响判断逻辑。

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