React Query无限滚动触发请求的TypeScript类型定义问题

你的问题出在滚动事件的类型定义上，ScrollBehavior<EventListener>是完全错误的类型，以下是修正方案：

正确的事件类型定义 #

滚动事件的参数类型应该用Event（或更精确的UIEvent），而非ScrollBehavior——ScrollBehavior是用于控制滚动平滑度的枚举类型（可选值'auto'/'smooth'），和事件对象无关。

监听整个文档滚动的修正代码 #

function onScroll(this: Document, ev: Event) {
  // 兼容部分浏览器scrollingElement为null的情况
  const scrollingElement = this.scrollingElement || document.documentElement;
  const { scrollHeight, scrollTop, clientHeight } = scrollingElement;

  if (hasNextPage && scrollHeight - scrollTop <= clientHeight * 1.2) {
    fetchNextPage();
  }
}

监听指定容器滚动的修正代码 #

如果是给某个DOM容器（比如div）绑定滚动事件，this的类型要对应容器元素：

function onScroll(this: HTMLDivElement, ev: Event) {
  const { scrollHeight, scrollTop, clientHeight } = this;

  if (hasNextPage && scrollHeight - scrollTop <= clientHeight * 1.2) {
    fetchNextPage();
  }
}

关键说明 #

• 直接使用this获取滚动容器比ev.target更可靠，因为ev.target可能指向容器内的子元素，而非滚动容器本身。
• 增加document.documentElement作为fallback，避免部分浏览器中scrollingElement返回null导致的报错。

内容的提问来源于stack exchange，提问作者Rafael Heros Almeida