如何在antd@5.16.0中实现悬停自动滚动到底的Dropdown

问题背景 #

使用antd@5.16.0开发Dropdown组件时遇到以下问题：

• 期望鼠标悬停打开下拉菜单时，列表自动滚动到底部，但实际仅在鼠标离开时才触发滚动
• 点击新增按钮添加选项后，下拉列表也无法自动滚动到底部
• 之前找到的Stack Overflow方案针对antd@4.7.0的Drawer组件，不适用于当前场景

可行解决方案 #

核心是通过DOM操作结合状态监听，在下拉菜单显示、内容更新时主动触发滚动到底部的操作，具体实现步骤如下：

1. 绑定下拉容器的Ref #

使用useRef获取下拉菜单的内容容器DOM节点，方便后续操作滚动属性。

2. 监听菜单打开状态 #

利用Dropdown的onOpenChange事件，当菜单打开（悬停触发）时，执行滚动到底部的逻辑。这里需要加setTimeout延迟执行，确保菜单DOM已经完全渲染，能获取到正确的滚动高度。

3. 监听内容更新 #

当新增选项后，通过useEffect监听列表数据的变化，若此时下拉菜单处于打开状态，立即触发滚动。

4. 滚动到底部的核心代码 #

const scrollToBottom = () => {
  if (dropdownRef.current) {
    dropdownRef.current.scrollTop = dropdownRef.current.scrollHeight;
  }
};

完整示例代码 #

import { useState, useRef, useEffect } from 'react';
import { Dropdown, Button } from 'antd';

const AutoScrollDropdown = () => {
  const [items, setItems] = useState([1, 2, 3, 4, 5]);
  const dropdownRef = useRef(null);

  // 滚动到底部的通用方法
  const scrollToBottom = () => {
    if (dropdownRef.current) {
      dropdownRef.current.scrollTop = dropdownRef.current.scrollHeight;
    }
  };

  // 下拉菜单打开/关闭时触发
  const handleOpenChange = (open) => {
    if (open) {
      // 延迟等待DOM渲染完成
      setTimeout(scrollToBottom, 0);
    }
  };

  // 监听列表数据变化，新增后自动滚动
  useEffect(() => {
    // 判断菜单是否处于打开状态
    if (dropdownRef.current && document.querySelector('.ant-dropdown-open')) {
      scrollToBottom();
    }
  }, [items]);

  // 新增选项按钮逻辑
  const addItem = () => {
    setItems([...items, items.length + 1]);
  };

  // 下拉菜单内容
  const dropdownContent = (
    <div 
      ref={dropdownRef} 
      style={{ maxHeight: '200px', overflowY: 'auto', width: '150px' }}
    >
      {items.map(item => (
        <div key={item} style={{ padding: '8px 12px', cursor: 'pointer' }}>
          选项{item}
        </div>
      ))}
    </div>
  );

  return (
    <div style={{ padding: '20px' }}>
      <Dropdown 
        overlay={dropdownContent} 
        trigger={['hover']} 
        onOpenChange={handleOpenChange}
      >
        <Button>悬停打开下拉菜单</Button>
      </Dropdown>
      <Button 
        onClick={addItem} 
        style={{ marginLeft: '12px' }}
        type="primary"
      >
        新增选项
      </Button>
    </div>
  );
};

export default AutoScrollDropdown;

关键注意点 #

• 必须给下拉内容容器设置maxHeight和overflowY: auto，确保内容超出时出现滚动条
• 使用setTimeout延迟滚动是因为antd的下拉菜单是异步渲染的，直接执行可能获取不到正确的scrollHeight
• 监听数据变化时要判断菜单是否打开，避免不必要的滚动操作

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