实现带按键悬停功能的scroll-able下拉菜单（无select box文本框）技术咨询

这需求在纯选择类场景里挺实用的——不用输入框，全靠键盘就能快速定位选项，我给你一套兼顾性能和用户体验的最优实现方案：

核心思路 #

要搞定这个需求，核心得抓住这几个关键点：

1. 用可滚动容器承载选项列表，替代原生select的下拉面板，灵活控制样式和交互
2. 维护一个「当前选中索引」状态，跟踪键盘导航的位置，同步更新悬停样式
3. 提前缓存每个首字母对应的选项索引集合，避免每次按键都遍历100个选项，提升响应速度
4. 键盘事件分两类处理：上下箭头的循环切换、字母键的按首字母循环跳转
5. 选中项自动滚动到可视区域，避免用户手动滚动找选项

具体实现步骤 & 代码示例 #

1. HTML结构 #

我们需要一个触发按钮（用来打开/关闭菜单），加上可滚动的下拉菜单容器，选项可以用JS批量生成：

<button id="menuTrigger">打开菜单</button>
<div id="dropdownMenu" class="dropdown-menu">
  <!-- 选项将通过JS生成 -->
</div>

2. CSS样式 #

给菜单设置固定高度和滚动属性，同时定义选中（悬停）状态的样式：

.dropdown-menu {
  position: absolute;
  top: 40px;
  left: 0;
  width: 200px;
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #ddd;
  background-color: #fff;
  display: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
}

.dropdown-item.active {
  background-color: #f0f0f0;
  color: #212121;
}

/* 可选：隐藏默认滚动条，优化视觉 */
.dropdown-menu::-webkit-scrollbar {
  width: 6px;
}
.dropdown-menu::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

3. JavaScript核心逻辑 #

这部分是重点，我们要实现选项生成、首字母缓存、键盘导航、滚动定位：

const menuTrigger = document.getElementById('menuTrigger');
const dropdownMenu = document.getElementById('dropdownMenu');
let currentActiveIndex = -1;
let letterMap = {};

// 生成示例选项（模拟你的100个需求）
const sampleOptions = [
  'Apple', 'Ant', 'Ball', 'Banana', 'Orange', 'Apricot', 'Avocado',
  'Blueberry', 'Blackberry', 'Cherry', 'Coconut', 'Date', 'Dragonfruit',
  'Elderberry', 'Fig', 'Grape', 'Grapefruit', 'Honeydew', 'Kiwi',
  // 这里可以继续补全到100个...
];

// 初始化菜单选项
function initMenu() {
  sampleOptions.forEach((option, index) => {
    const item = document.createElement('div');
    item.className = 'dropdown-item';
    item.textContent = option;
    item.dataset.index = index;
    dropdownMenu.appendChild(item);

    // 缓存首字母对应的索引集合（大小写不敏感）
    const firstLetter = option.charAt(0).toUpperCase();
    if (!letterMap[firstLetter]) {
      letterMap[firstLetter] = [];
    }
    letterMap[firstLetter].push(index);
  });
}

// 设置选中项样式
function setActiveIndex(index) {
  // 移除之前的选中样式
  const prevActiveItem = dropdownMenu.querySelector('.active');
  if (prevActiveItem) {
    prevActiveItem.classList.remove('active');
  }

  // 设置新的选中样式
  if (index >= 0 && index < sampleOptions.length) {
    currentActiveIndex = index;
    const activeItem = dropdownMenu.children[index];
    activeItem.classList.add('active');
    // 自动滚动到可视区域
    activeItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
  }
}

// 键盘事件处理
function handleKeyDown(e) {
  if (!dropdownMenu.style.display || dropdownMenu.style.display === 'none') return;

  switch(e.key) {
    case 'ArrowUp':
      e.preventDefault();
      // 循环切换上一个选项
      const newUpIndex = currentActiveIndex <= 0 ? sampleOptions.length - 1 : currentActiveIndex - 1;
      setActiveIndex(newUpIndex);
      break;
    case 'ArrowDown':
      e.preventDefault();
      // 循环切换下一个选项
      const newDownIndex = currentActiveIndex >= sampleOptions.length - 1 ? 0 : currentActiveIndex + 1;
      setActiveIndex(newDownIndex);
      break;
    default:
      // 处理字母键（只处理A-Z，忽略其他按键）
      const key = e.key.toUpperCase();
      if (/^[A-Z]$/.test(key) && letterMap[key]) {
        e.preventDefault();
        const indices = letterMap[key];
        // 找到当前选中索引在字母集合中的位置
        const currentPos = indices.indexOf(currentActiveIndex);
        // 循环切换到下一个同首字母的选项
        const nextPos = currentPos === indices.length - 1 ? 0 : currentPos + 1;
        setActiveIndex(indices[nextPos]);
      }
  }
}

// 菜单显示/隐藏逻辑
menuTrigger.addEventListener('click', () => {
  const isVisible = dropdownMenu.style.display === 'block';
  dropdownMenu.style.display = isVisible ? 'none' : 'block';
  // 打开菜单时自动选中第一个选项（可选：也可以记住上次选中的位置）
  if (!isVisible) {
    setActiveIndex(currentActiveIndex === -1 ? 0 : currentActiveIndex);
    // 让菜单获取焦点，确保键盘事件能触发
    dropdownMenu.focus({ preventScroll: true });
  }
});

// 点击菜单外部关闭菜单
document.addEventListener('click', (e) => {
  if (!dropdownMenu.contains(e.target) && e.target !== menuTrigger) {
    dropdownMenu.style.display = 'none';
  }
});

// 初始化
initMenu();
// 监听键盘事件
document.addEventListener('keydown', handleKeyDown);
// 给菜单添加tabindex，让它能接收焦点
dropdownMenu.setAttribute('tabindex', '0');

优化建议 #

1. 防抖处理字母输入：如果用户快速连续按同一个字母，加个300ms左右的防抖，避免频繁切换选项
2. 虚拟滚动：如果以后选项超过1000个，可以用虚拟滚动只渲染可视区域的选项，大幅提升性能
3. 无障碍支持：添加ARIA属性（比如role="listbox"、aria-selected），让屏幕阅读器能识别菜单
4. 记忆选中位置：关闭菜单时记住当前选中索引，下次打开时自动定位到该选项
5. 特殊字符兼容：可以进一步处理带 accents 的字母（比如Ä、É），让匹配更精准

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