根据给出的代码，左侧滚动右侧也会被影响的原因可能是因为handleScroll函数中使用了scrollContainerId来获取滚动容器元素，而scrollContainerId的值是由props中的isTabs属性决定的。当isTabs为false时，即左侧滚动列表时，获取到的滚动容器元素实际上是右侧记录列表所在的容器。
要解决这个问题，可以考虑以下几点：
- 在判断是否接近页面底部时，需要确保只有符合条件的列表（奖励列表或记录列表）进行数据加载操作。
- 使用不同的id或类名来标识左右两个列表所在的滚动容器，确保正确获取到对应的滚动容器元素。
- 通过事件委托将滚动事件绑定到父容器上，在事件处理函数中根据目标元素来判断是哪个列表触发了滚动。
例如，可以为奖励列表和记录列表分别设置不同的id，并修改handleScroll函数中获取滚动容器元素的逻辑：
const handleScroll = (e: React.UIEvent<HTMLElement>) => {
const scrollContainerId = e.currentTarget.id
// 根据scrollContainerId判断是哪个列表触发了滚动
if (scrollContainerId === 'award-scroll') {
// 奖励列表相关逻辑
} else if (scrollContainerId === 'record-scroll') {
// 记录列表相关逻辑
}
}
// ...
useEffect(() => {
const scrollContainerId = props.isTabs ? 'award-scroll' : 'record-scroll'
const scrollRegio = document.getElementById(scrollContainerId)
if (scrollRegio) {
scrollRegio.addEventListener('scroll', handleScroll)
return () => scrollRegio.removeEventListener('scroll', handleScroll)
}
}, [rewardsList, awardList, props.isTabs])
通过使用不同的id来标识左右两个滚动容器，可以确保事件处理函数中根据id判断出是哪个列表触发了滚动，从而避免左侧滚动影响右侧列表。
内容由零声教学AI助手提供，问题来源于学员提问
