如何检测横向排列的Div列表是否超出容器宽度并实现更优雅的事件驱动式处理方案？

Nice approach you've already got going—let's refine it to be more robust, event-driven, and less coupled. Here's how to fix the fragility and make this solution clean and reusable:

1. Encapsulate All Logic into a Reusable Module #

The biggest fix for your "fragility" issue is to wrap the resize tracking, overflow detection, and dropdown switching into a self-contained component or class. This way, child <div>s don't need to know anything about the parent's tracking logic—they just exist, and the module handles the rest.

For example, with vanilla JS, you could create a class that takes the parent container and dropdown menu as inputs, then manages all internal behavior:

class HorizontalOverflowHandler {
  constructor(containerEl, dropdownEl) {
    this.container = containerEl;
    this.dropdown = dropdownEl;
    this.items = Array.from(this.container.children);
    
    this.initObservers();
    this.syncLayout();
  }

  // Set up event-driven triggers
  initObservers() {
    // Track container width changes
    this.resizeObserver = new ResizeObserver(() => this.syncLayout());
    this.resizeObserver.observe(this.container);

    // Track item additions/removals or content changes
    this.mutationObserver = new MutationObserver(() => {
      this.items = Array.from(this.container.children);
      this.syncLayout();
    });
    this.mutationObserver.observe(this.container, {
      childList: true,
      subtree: true,
      characterData: true
    });
  }

  // Calculate which items fit and update the layout
  syncLayout() {
    const containerWidth = this.container.clientWidth;
    const visibleItems = [];
    const overflowItems = [];
    let currentTotalWidth = 0;

    this.items.forEach(item => {
      const itemWidth = item.offsetWidth;
      if (currentTotalWidth + itemWidth <= containerWidth) {
        visibleItems.push(item);
        currentTotalWidth += itemWidth;
      } else {
        overflowItems.push(item);
      }
    });

    // Update DOM: keep visible items in container, move overflow to dropdown
    this.container.innerHTML = '';
    visibleItems.forEach(item => this.container.appendChild(item));

    this.dropdown.innerHTML = '';
    overflowItems.forEach(item => {
      const dropdownItem = document.createElement('div');
      dropdownItem.appendChild(item.cloneNode(true)); // Or move nodes directly if preferred
      this.dropdown.appendChild(dropdownItem);
    });

    // Show/hide dropdown based on overflow
    this.dropdown.style.display = overflowItems.length > 0 ? 'block' : 'none';
  }

  // Cleanup observers when done
  destroy() {
    this.resizeObserver.disconnect();
    this.mutationObserver.disconnect();
  }
}

// Usage
const container = document.querySelector('.horizontal-items-container');
const dropdown = document.querySelector('.overflow-dropdown');
const overflowHandler = new HorizontalOverflowHandler(container, dropdown);

2. Ditch visibility:hidden for DOM Manipulation #

Instead of hiding items while keeping them in the layout, move overflow items directly into the dropdown menu. This eliminates any unintended layout side effects and makes the container's width behavior predictable. You can either clone items or move the original nodes (depending on whether you need to preserve event listeners).

3. Add Debouncing for Performance #

Resize events can fire rapidly during window resizing. Add a simple debounce to your syncLayout method to avoid excessive calculations:

debounce(func, delay = 150) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// Then wrap syncLayout in initObservers:
this.syncLayout = this.debounce(this.syncLayout.bind(this));

4. Handle Edge Cases #

• Dynamic item content: The MutationObserver already tracks content changes, so items that grow/shrink in width will trigger a layout update automatically.
• Initial load: The syncLayout call in the constructor ensures the layout is correct on page load, before any resize events fire.
• Media query overrides: For small screens, you can add a media query to force the dropdown to show by default, skipping the overflow check entirely for better performance.

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