当滚动到达容器末尾时，如何使左/右按钮消失？答案

【问题标题】：How can I make left/right button disappear when the scroll gets to the end of the container?当滚动到达容器末尾时，如何使左/右按钮消失？
【发布时间】：2022-08-19 21:16:39
【问题描述】：

我创建了一个标签项列表，由<ul> 容器包装。我给这个容器一个max-width 和overflow-x 属性，所以选项卡项列表溢出了它。

这是<ul> 包装器和选项卡项映射列表的基本代码。

      <ul className=\"tabs\" ref={wrapperRef}>
        {tabs.map((tab) => (
          <li
            onClick={() => setActive(tab)}
            className={`tab ${tab === active ? \"active\" : \"\"}`}
            key={tab}
          >
            {tab}
          </li>
        ))}
      </ul>

然后，我在左侧和右侧添加了两个绝对定位的按钮。这些按钮将滚动到容器的左端或右端。例如，当我们到达容器的右端时，“右”按钮必须消失。另一边也一样，“左”按钮消失了。

代码如下：

    <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\" onClick={() => adjustView(\"left\")}>
          Left
        </button>
        <button className=\"right\" onClick={() => adjustView(\"right\")}>
          Right
        </button>
      }
    </div>

但是，有一个问题。如果我们手动与滚动交互，按钮仍会像我们上次与它们交互时一样显示。例如，如果我单击“右”按钮，它会滚动到末尾，“右”按钮会按预期消失，但是，如果我使用鼠标将容器滚动到左侧，则“ Right\" 按钮仍然隐藏，当它应该显示时，\"Left\" 按钮应该被隐藏。

我怎样才能做到这一点？

哦，还有一件事，我希望按钮只有在滚动完成后才会消失。我想有条件地渲染按钮不再是一个解决方案。

这是完整的沙盒。 https://codesandbox.io/s/tab-scroll-3tzi80

标签： javascript html css reactjs

【解决方案1】：

你可以这样做（见codesandbox）：

监听滚动事件：

      <ul className="tabs" ref={wrapperRef} onScroll={handleScroll}>

使用滚动事件参数计算我们是在左、右还是在两者之间，并更新状态：

  const handleScroll = () => {
    if (wrapperRef.current) {
      const { scrollLeft, scrollWidth, clientWidth } = wrapperRef.current;
      switch (scrollLeft + clientWidth) {
        //Scroll is utter left
        case clientWidth:
          setDisableButton("left");
          break;
        //Scroll is utter right
        case scrollWidth:
          setDisableButton("right");
          break;
        //Scroll somewhere in between
        default:
          setDisableButton("none");
      }
    }
  };
  
  //Adjust view based on state
  function adjustView(position) {
    if (position === "left") {
      scrollTabbar(wrapperRef?.current, 0);
    } else {
      scrollTabbar(wrapperRef?.current, wrapperRef.current?.scrollWidth);
    }
  }

按钮也只有在滚动完成时才会消失，所以这也解决了！当我们不在左边或右边时，两个按钮都会显示。

【讨论】：