如何在InfiniteScroll渲染后修改scrollY？点击按钮修改initialScrollY无效求助

为什么修改initialScrollY不生效？ #

initialScrollY是组件初始化阶段用来设置初始滚动位置的属性，组件挂载完成后再修改这个值不会触发滚动位置更新——因为组件内部不会监听该属性的后续变化。

点击按钮修改滚动位置的方案 #

直接操作滚动容器的DOM元素，设置scrollTop属性就能实现：

// 按钮点击事件处理函数
const handleScrollToTarget = () => {
  // 获取指定的滚动容器
  const scrollContainer = document.getElementById('scrollableDiv');
  if (scrollContainer) {
    // 设置目标滚动位置，比如300px
    scrollContainer.scrollTop = 300;
  }
};

// 按钮示例
<button onClick={handleScrollToTarget}>滚动到指定位置</button>

InfiniteScroll渲染完成后修改滚动位置 #

利用useEffect监听数据加载完成的状态（比如searchList.length变化），确保渲染完成后再调整滚动位置：

// 替换原来的useEffect，直接操作DOM实现滚动控制
useEffect(() => {
  const scrollContainer = document.getElementById('scrollableDiv');
  if (!scrollContainer) return;

  if (searchParams?.get('filter')) {
    scrollContainer.scrollTop = 300;
  } else {
    scrollContainer.scrollTop = 0;
  }
}, [searchParams, searchList.length]); // 依赖searchParams和数据长度，保证渲染完成后执行

// InfiniteScroll组件保持原有配置
<InfiniteScroll
  initialScrollY={0} // 仅初始化时生效，后续调整靠DOM操作
  dataLength={searchList.length}
  next={getSearchListMore}
  hasMore={hasMore}
  loader={<SearchListSkeleton />}
  hasChildren
  scrollableTarget="scrollableDiv"
  className="flex-1 flex-grow overflow-y-scroll no-scrollbar"
  height="calc(100vh - 96px)"
>
  {/* 子元素内容 */}
</InfiniteScroll>

额外优化：用ref获取滚动容器 #

如果不想通过ID获取DOM，可以用useRef直接绑定滚动容器，更符合React的组件引用规范：

const scrollContainerRef = useRef(null);

// 把滚动容器单独抽出来，绑定ref
<div 
  id="scrollableDiv" 
  ref={scrollContainerRef} 
  className="flex-1 flex-grow overflow-y-scroll no-scrollbar" 
  style={{ height: "calc(100vh - 96px)" }}
>
  <InfiniteScroll
    dataLength={searchList.length}
    next={getSearchListMore}
    hasMore={hasMore}
    loader={<SearchListSkeleton />}
    hasChildren
    scrollableTarget="scrollableDiv"
  >
    {/* 子元素内容 */}
  </InfiniteScroll>
</div>

// 在useEffect或点击事件中使用ref控制滚动
useEffect(() => {
  if (!scrollContainerRef.current) return;
  
  scrollContainerRef.current.scrollTop = searchParams?.get('filter') ? 300 : 0;
}, [searchParams, searchList.length]);

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