Antd TimePicker 如何取消选中后自动滚动至选中项的行为

核心问题在于：TimePicker选中时间后，组件会自动将面板滚动到选中项顶部，你在onSelect里直接调用的scrollTo操作会被组件后续的滚动逻辑覆盖，因为组件内置的滚动执行时机更晚。下面是两个可行的解决思路：

方法一：延迟恢复滚动位置 #

利用setTimeout把滚动调整操作放到组件自带滚动逻辑之后执行，同时提前记录面板的滚动位置：

1. 监听面板滚动事件，实时记录当前滚动距离到状态中
2. 在onSelect回调里，用setTimeout延迟恢复之前记录的滚动位置

代码示例：

import React, { useState, useEffect, useRef } from 'react';
import { TimePicker } from 'antd';

const StickyScrollTimePicker = () => {
  const [lastScrollTop, setLastScrollTop] = useState(0);
  const panelScrollRef = useRef(null);

  // 监听面板滚动，记录滚动位置
  useEffect(() => {
    const panelContent = document.querySelector('.ant-time-picker-panel-content');
    if (!panelContent) return;
    
    panelScrollRef.current = panelContent;
    const handleScroll = () => setLastScrollTop(panelContent.scrollTop);
    
    panelContent.addEventListener('scroll', handleScroll);
    return () => panelContent.removeEventListener('scroll', handleScroll);
  }, []);

  const handleTimeSelect = () => {
    if (!panelScrollRef.current) return;
    // 延迟执行，确保在组件自带滚动之后恢复位置
    setTimeout(() => {
      panelScrollRef.current.scrollTop = lastScrollTop;
    }, 0);
  };

  return <TimePicker onSelect={handleTimeSelect} />;
};

export default StickyScrollTimePicker;

方法二：覆盖组件内部滚动逻辑（进阶） #

如果不想依赖setTimeout，可以尝试修改Antd TimePicker的内部组件行为，但需要借助rc-time-picker（Antd TimePicker的底层依赖）的自定义面板能力。不过v4版本的Antd对内部组件暴露有限，这个方法复杂度较高，更推荐第一种方案。

关键注意点 #

• Antd v4.8.4的时间面板滚动容器类名是ant-time-picker-panel-content，若后续版本类名变更需同步调整
• setTimeout(..., 0)的作用是将滚动操作放到事件队列末尾，确保组件自带的滚动逻辑执行完成后，再恢复我们需要的滚动位置

内容的提问来源于stack exchange，提问作者jg-brit