如何实现Combobox滚动触底监听？无法绑定滚动事件的解决方法

以下是几种可行的实现思路，适配不同场景：

方法1：直接查询DOM获取下拉容器并添加滚动监听 #

Combobox的下拉列表通常是带滚动条的独立DOM元素，可通过类名/选择器定位后手动绑定滚动事件：

// 假设Combobox输入框的ID为"combobox-input"
const input = document.getElementById('combobox-input');

// 监听输入框聚焦事件（触发下拉展开）
input.addEventListener('focus', () => {
  // 延迟执行，确保下拉列表已渲染完成
  setTimeout(() => {
    // 替换为你使用的UI库对应的下拉容器选择器，例如AntD用.ant-select-dropdown-menu
    const dropdownMenu = document.querySelector('.your-combobox-dropdown-class');
    if (dropdownMenu) {
      dropdownMenu.addEventListener('scroll', () => {
        // 判断是否滚动至底部（留10px误差避免渲染精度问题）
        const isBottom = dropdownMenu.scrollTop + dropdownMenu.clientHeight >= dropdownMenu.scrollHeight - 10;
        if (isBottom) {
          console.log('reached');
          // 执行你的自定义操作
        }
      });
    }
  }, 100);
});

方法2：框架中利用Ref获取下拉容器（以React为例） #

如果使用React类UI组件库（如AntD、MUI），可通过组件API或Ref获取下拉容器节点：

import { Select } from 'antd';
import { useEffect, useRef } from 'react';

const CustomCombobox = () => {
  const popupContainerRef = useRef(null);

  useEffect(() => {
    const dropdownMenu = popupContainerRef.current?.querySelector('.ant-select-dropdown-menu');
    if (!dropdownMenu) return;

    const handleScroll = () => {
      const isBottom = dropdownMenu.scrollTop + dropdownMenu.clientHeight >= dropdownMenu.scrollHeight - 10;
      if (isBottom) console.log('reached');
    };

    dropdownMenu.addEventListener('scroll', handleScroll);
    // 组件卸载时移除监听，避免内存泄漏
    return () => dropdownMenu.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <Select
      getPopupContainer={() => {
        const container = document.createElement('div');
        popupContainerRef.current = container;
        document.body.appendChild(container);
        return container;
      }}
      // 其他组件属性
    />
  );
};

方法3：用MutationObserver监听下拉列表的动态生成 #

如果下拉列表是完全动态渲染的，可通过DOM变化监听来捕获它的出现：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.addedNodes.length === 0) return;
    // 匹配目标下拉容器，替换为实际选择器
    const dropdownMenu = document.querySelector('.your-combobox-dropdown-class');
    if (dropdownMenu && !dropdownMenu.dataset.scrollBound) {
      // 标记已绑定监听，避免重复添加
      dropdownMenu.dataset.scrollBound = 'true';
      dropdownMenu.addEventListener('scroll', () => {
        const isBottom = dropdownMenu.scrollTop + dropdownMenu.clientHeight >= dropdownMenu.scrollHeight - 10;
        if (isBottom) console.log('reached');
      });
    }
  });
});

// 监听body下的所有DOM子节点变化
observer.observe(document.body, {
  childList: true,
  subtree: true
});

注意事项 #

• 不同UI库的下拉容器类名不同，需根据实际使用的组件库调整选择器
• 滚动判断时保留少量误差值，避免因浏览器渲染精度问题导致触发不及时
• 单页应用场景下，记得在组件卸载或页面切换时移除事件监听及MutationObserver，防止内存泄漏

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