为何内联函数能解决React onScroll事件的类型不匹配错误？

1. 为什么ChangeEvent<HTMLElement>和事件类型不匹配？ #

React里<div>的onScroll事件对应的事件对象类型是**React.UIEvent<HTMLDivElement>**，而你用的ChangeEvent是专门给表单元素（如input、select、textarea）的onChange事件设计的，和滚动事件属于完全不同的事件类型体系。

你把滚动事件处理函数的参数定义为ChangeEvent<HTMLElement>，相当于告诉TypeScript这个函数接收的是表单变化事件，但实际触发的是滚动事件，类型自然不兼容，所以直接传递handleScroll会报错。

2. 为什么内联函数() => handleScroll能消除错误？ #

首先要明确：这个写法是无效的假修复——当滚动事件触发时，React会调用这个内联函数，但内联函数只是返回handleScroll的函数引用，并没有真正执行它，你的滚动逻辑根本不会运行。

TypeScript不报错的原因是：UIEventHandler<HTMLDivElement>要求的是一个“接收UIEvent参数并返回void”的函数，而你的内联函数() => handleScroll没有接收参数，在非严格类型检查模式下，TypeScript会允许这种“忽略参数”的隐式兼容，所以错误提示消失了，但这并不是正确的解决方式。

正确的解决方法 #

把处理函数的参数类型改成React.UIEvent<HTMLDivElement>，同时注意e.target的类型需要断言为HTMLDivElement（因为UIEvent的target默认是EventTarget类型，没有DOM元素的专属属性）：

import React from 'react';

function handleScroll(e: React.UIEvent<HTMLDivElement>) {
  // 断言target为HTMLDivElement，才能访问scrollTop、scrollHeight等属性
  const target = e.target as HTMLDivElement;
  const scrollPosition = target.scrollTop;
  const scrollMax = target.scrollHeight / 1.25;
  const scrollPercentage = scrollPosition / scrollMax;

  const scaler = 1800;

  const bgPosition = (1 - scrollPercentage) * scaler - scaler / 2;

  scrollRef.current.style.transform = `translate(${bgPosition}px, 55%)`;
}

之后直接使用<div onScroll={handleScroll}>就不会有类型错误了，而且滚动逻辑能正常执行。

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