如何将DIV滚动控制按钮可见性与滚动状态关联？无需轮询

不用轮询，以下几种事件/API可以精准监听容器滚动状态的变化，满足你的需求：

1. 使用ResizeObserver监听元素尺寸变化 #

这是替代window.resize事件的最佳方案，它可以直接监听容器本身和内部内容元素的尺寸变化，适配移动端、Mac端等所有场景，不会遗漏元素尺寸更新的情况。

实现思路： #

• 创建ResizeObserver实例，监听滚动容器和内部内容元素的尺寸变化
• 每次尺寸变化时，对比容器的scrollWidth和offsetWidth，判断是否需要显示按钮（用visibility: hidden保持占位，仅控制可见性）

代码示例： #

// 定义更新按钮可见性的通用函数
const updateScrollButtons = (container) => {
  const hasScrollableContent = container.scrollWidth > container.offsetWidth;
  const prevBtn = container.querySelector('.scroll-prev');
  const nextBtn = container.querySelector('.scroll-next');

  if (hasScrollableContent) {
    prevBtn.classList.add('visible');
    nextBtn.classList.add('visible');
  } else {
    prevBtn.classList.remove('visible');
    nextBtn.classList.remove('visible');
  }
};

// 初始化监听
const scrollContainer = document.querySelector('.scroll-container');
const scrollContent = scrollContainer.querySelector('.scroll-content');

const resizeObserver = new ResizeObserver(() => {
  updateScrollButtons(scrollContainer);
});

// 同时监听容器和内容元素的尺寸变化
resizeObserver.observe(scrollContainer);
resizeObserver.observe(scrollContent);

2. 使用MutationObserver监听内容结构变化 #

如果容器内的内容是动态增减（比如加载新元素、删除元素），ResizeObserver可能无法覆盖所有场景，这时可以配合MutationObserver监听内容的结构变化：

实现思路： #

• 监听内容元素的子元素增减、属性变化（比如样式、类名）
• 当内容结构变化时，重新检查滚动状态并更新按钮可见性

代码示例： #

const mutationObserver = new MutationObserver(() => {
  updateScrollButtons(scrollContainer);
});

// 配置监听规则：监听子元素变化、子树所有元素、指定属性变化
mutationObserver.observe(scrollContent, {
  childList: true,
  subtree: true,
  attributes: true,
  attributeFilter: ['style', 'class']
});

3. 结合scroll事件优化边缘状态（可选） #

如果需要在滚动到容器边缘时隐藏对应按钮（比如滚到最左侧时隐藏左按钮），可以额外监听容器的scroll事件，补充判断滚动位置：

scrollContainer.addEventListener('scroll', () => {
  const prevBtn = scrollContainer.querySelector('.scroll-prev');
  const nextBtn = scrollContainer.querySelector('.scroll-next');

  // 滚到最左侧时隐藏左按钮
  if (scrollContainer.scrollLeft <= 0) {
    prevBtn.classList.remove('visible');
  } else if (scrollContainer.scrollWidth > scrollContainer.offsetWidth) {
    prevBtn.classList.add('visible');
  }

  // 滚到最右侧时隐藏右按钮
  if (scrollContainer.scrollLeft >= scrollContainer.scrollWidth - scrollContainer.offsetWidth) {
    nextBtn.classList.remove('visible');
  } else if (scrollContainer.scrollWidth > scrollContainer.offsetWidth) {
    nextBtn.classList.add('visible');
  }
});

配套CSS（满足占位隐藏需求） #

.scroll-container {
  position: relative;
  overflow-x: auto;
  white-space: nowrap;
}

.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  visibility: hidden; /* 默认隐藏，保留占位空间 */
  padding: 8px 12px;
  border: none;
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
}

.scroll-btn.visible {
  visibility: visible; /* 显示按钮 */
}

.scroll-prev { left: 10px; }
.scroll-next { right: 10px; }

方案优势 #

• 完全替代轮询，性能更优，不会产生不必要的定时器开销
• 覆盖所有可能触发滚动状态变化的场景：容器尺寸变化、内容尺寸变化、内容结构变化
• 适配移动端、Mac端等所有环境，不受window.resize事件的限制

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