如何让自定义Select输入框下拉菜单从选中项开始展示？

核心思路 #

要让下拉菜单打开时自动将选中项纳入可视范围，核心是在下拉展开时通过DOM操作让选中项滚动到视图内，以下是具体实现方案：

1. 使用scrollIntoView快速实现（推荐） #

利用浏览器原生API实现简洁的滚动定位，还能配置选中项居中显示：

import { useRef, useEffect, useState } from 'react';

// 定义跟踪选中项的ref及状态
const selectedItemRef = useRef(null);
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const [selectedIndex, setSelectedIndex] = useState(11); // 示例：选中第12项（索引11）

// 下拉状态切换或选中项变化时触发滚动
useEffect(() => {
  if (isDropdownOpen && selectedItemRef.current) {
    // block: 'center'让选中项居中，behavior可选'smooth'实现平滑滚动
    selectedItemRef.current.scrollIntoView({ block: 'center', behavior: 'auto' });
  }
}, [isDropdownOpen, selectedIndex]);

// 渲染菜单项时给选中项绑定ref
const renderMenuItems = (menuItems) => {
  return menuItems.map((item, index) => (
    <div
      key={item.value}
      ref={index === selectedIndex ? selectedItemRef : null}
      className={index === selectedIndex ? 'menu-item selected' : 'menu-item'}
      onClick={() => {
        setSelectedIndex(index);
        setIsDropdownOpen(false);
      }}
    >
      {item.label}
    </div>
  ));
};

2. 手动计算滚动位置（精细控制） #

如果需要更精准的偏移控制，可手动计算并设置容器的scrollTop值：

const dropdownContainerRef = useRef(null);

useEffect(() => {
  if (isDropdownOpen && selectedItemRef.current && dropdownContainerRef.current) {
    const containerRect = dropdownContainerRef.current.getBoundingClientRect();
    const itemRect = selectedItemRef.current.getBoundingClientRect();
    // 计算偏移量，让选中项垂直居中
    const scrollOffset = itemRect.top - containerRect.top - (containerRect.height / 2);
    dropdownContainerRef.current.scrollTop = scrollOffset;
  }
}, [isDropdownOpen, selectedIndex]);

// 渲染下拉容器时绑定ref
return (
  <div className="select-container">
    <input 
      type="text" 
      onClick={() => setIsDropdownOpen(!isDropdownOpen)}
      value={menuItems[selectedIndex].label}
    />
    {isDropdownOpen && (
      <div
        ref={dropdownContainerRef}
        style={{ 
          maxHeight: visibleItems ? `calc(1.5rem * ${visibleItems})` : 'auto',
          overflowY: 'auto', // 必须开启垂直滚动，否则maxHeight不生效
          ...style 
        }}
        className="dropdown-menu"
      >
        {renderMenuItems(menuItems)}
      </div>
    )}
  </div>
);

3. 关键CSS补充 #

确保下拉容器的滚动配置正确，缺失overflowY: 'auto'会导致maxHeight无法生成滚动效果：

style={{ 
  maxHeight: visibleItems ? `calc(1.5rem * ${visibleItems})` : 'auto',
  overflowY: 'auto', // 此属性为必填项
  ...style 
}}

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