如何实现容器滚动至两端时隐藏左右按钮，解决手动滚动按钮状态不同步问题并实现滚动结束后再隐藏按钮？

我明白你遇到的问题了——手动滚动Tabs容器时，左右按钮的显示状态没跟上滚动位置，而且条件渲染会让按钮在滚动过程中就消失，不符合你想要的"滚动结束后才消失"的需求。下面是具体的解决方案：

核心问题分析 #

1. 缺少滚动事件监听：之前的按钮状态只在点击按钮滚动后更新，手动滚动时没有触发状态更新，导致按钮状态不同步。
2. 条件渲染的局限性：直接通过条件渲染显示/隐藏按钮，会让按钮在滚动过程中立刻消失，无法实现"滚动结束后才隐藏"的平滑效果。

解决方案步骤 #

1. 添加滚动状态跟踪与防抖监听 #

首先，我们需要用状态来跟踪按钮的显示状态，然后给Tabs容器添加防抖的滚动监听——既保证滚动停止后更新状态，又避免滚动过程中频繁触发性能问题。

在组件中添加状态和工具函数：

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

function YourTabComponent() {
  const [active, setActive] = useState(tabs[0]);
  const [showLeftBtn, setShowLeftBtn] = useState(false);
  const [showRightBtn, setShowRightBtn] = useState(true);
  const wrapperRef = useRef(null);
  const tabs = ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4', 'Tab 5', 'Tab 6', 'Tab 7'];

  // 防抖函数：延迟执行回调，避免滚动过程中频繁更新
  const debounce = (func, delay) => {
    let timeoutId;
    return (...args) => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
  };

  // 计算滚动位置，更新按钮显示状态
  const handleScroll = () => {
    const { scrollLeft, scrollWidth, clientWidth } = wrapperRef.current;
    // 滚动距离大于0时显示左按钮，否则隐藏
    setShowLeftBtn(scrollLeft > 0);
    // 未滚动到最右端时显示右按钮（减1是为了避免像素精度问题）
    setShowRightBtn(scrollLeft < scrollWidth - clientWidth - 1);
  };

  // 用useCallback缓存防抖后的函数，避免每次渲染重新创建
  const debouncedHandleScroll = useCallback(debounce(handleScroll, 150), []);

  // 挂载时添加滚动监听，卸载时移除
  useEffect(() => {
    const wrapper = wrapperRef.current;
    if (wrapper) {
      wrapper.addEventListener('scroll', debouncedHandleScroll);
      // 初始化时检查一次滚动位置
      handleScroll();
      return () => {
        wrapper.removeEventListener('scroll', debouncedHandleScroll);
      };
    }
  }, [debouncedHandleScroll]);

  // ... 其他代码
}

2. 用CSS过渡替代条件渲染 #

我们不再直接移除按钮，而是通过CSS的opacity和visibility属性配合过渡效果，实现滚动结束后按钮平滑隐藏，滚动过程中保持可见。

调整按钮的JSX：

<div className="tabs__wrapper">
  <ul className="tabs" ref={wrapperRef}>
    {tabs.map((tab) => (
      <li 
        onClick={() => setActive(tab)} 
        className={`tab ${tab === active ? "active" : ""}`} 
        key={tab}
      >
        {tab}
      </li>
    ))}
  </ul>
  <button 
    className={`left ${showLeftBtn ? 'visible' : ''}`} 
    onClick={() => adjustView("left")}
  > 
    Left 
  </button>
  <button 
    className={`right ${showRightBtn ? 'visible' : ''}`} 
    onClick={() => adjustView("right")}
  > 
    Right 
  </button>
</div>

对应的CSS样式：

.tabs__wrapper {
  position: relative;
  max-width: 600px; /* 你的容器宽度 */
  overflow: hidden;
}

.tabs {
  display: flex;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  /* 隐藏原生滚动条（可选） */
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  padding: 8px 16px;
  white-space: nowrap;
  cursor: pointer;
}

.tab.active {
  font-weight: bold;
  border-bottom: 2px solid #007bff;
}

/* 按钮基础样式 */
.tabs__wrapper .left, .tabs__wrapper .right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 12px;
  border: none;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  cursor: pointer;
  /* 默认隐藏，通过visible类显示 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.tabs__wrapper .left {
  left: 8px;
}

.tabs__wrapper .right {
  right: 8px;
}

/* 显示按钮的类 */
.tabs__wrapper .left.visible, .tabs__wrapper .right.visible {
  opacity: 1;
  visibility: visible;
}

3. 优化程序控制的滚动逻辑 #

点击按钮滚动后，需要确保按钮状态能正确更新。因为scrollBy的smooth滚动是异步的，我们可以监听scrollend事件（现代浏览器支持）或者用setTimeout来触发状态更新：

const adjustView = (direction) => {
  const wrapper = wrapperRef.current;
  const scrollAmount = 200; // 每次滚动的距离，可根据需求调整

  // 监听滚动结束事件，更新按钮状态
  const handleScrollEnd = () => {
    handleScroll();
    wrapper.removeEventListener('scrollend', handleScrollEnd);
  };
  wrapper.addEventListener('scrollend', handleScrollEnd);

  if (direction === 'left') {
    wrapper.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
  } else {
    wrapper.scrollBy({ left: scrollAmount, behavior: 'smooth' });
  }
};

如果需要兼容旧浏览器，可以用setTimeout替代scrollend：

const adjustView = (direction) => {
  const wrapper = wrapperRef.current;
  const scrollAmount = 200;

  if (direction === 'left') {
    wrapper.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
  } else {
    wrapper.scrollBy({ left: scrollAmount, behavior: 'smooth' });
  }

  // 等待平滑滚动结束后更新状态（时间可根据scroll-behavior调整）
  setTimeout(handleScroll, 300);
};

效果验证 #

现在你可以测试：

• 手动滚动Tabs容器，滚动停止后左右按钮会根据滚动位置正确显示/隐藏
• 点击左右按钮滚动，滚动结束后按钮状态自动更新
• 滚动过程中按钮不会立刻消失，只有滚动停止后才会平滑隐藏

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