如何根据 Div 块中的项目隐藏自定义滚动按钮答案

【问题标题】：how to hide Custom Scroll buttons based on items in Div block如何根据 Div 块中的项目隐藏自定义滚动按钮
【发布时间】：2023-01-25 16:02:03
【问题描述】：

我有一组20 items。在 UI 中，我有两个按钮和 20 个项目。我的用户界面看起来像这样。

单击Prev 和Next 按钮时，它会正确滚动。

但现在我的需要是。当div块到达1st item时，我想隐藏prev按钮并只显示Next按钮。就像我到达最后一个20th item时一样，我想隐藏next按钮并只显示Prev按钮。在div 之间，我想显示两个按钮。

我试过但不知道如何实现它。请帮助解决一些问题。

这是我试过的代码：

import { useRef } from "react";

export default function App() {
  const cardsContainerRef = useRef();
  const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
  const onPrevorNextBtnClick = (scrollOffset) => {
    cardsContainerRef.current.scrollLeft += scrollOffset;
  };
  return (
    <div>
      <div style={{ display: "flex", gap: "10px" }}>
        <button
          onClick={() => {
            onPrevorNextBtnClick(-300);
          }}
        >
          Prev
        </button>
        <div
          ref={cardsContainerRef}
          style={{ display: "flex", gap: "10px", overflow: "hidden" }}
        >
          {data.map((item, index) => (
            <div
              style={{
                width: "100px",
                height: "100px",
                flexShrink: 0,
                backgroundColor: "green",
                color: "white"
              }}
            >
              {item}
            </div>
          ))}
        </div>

        <button
          onClick={() => {
            onPrevorNextBtnClick(300);
          }}
        >
          Next
        </button>
      </div>
    </div>
  );
}

代码沙盒链接：https://codesandbox.io/s/sweet-morning-ziweui?file=/src/App.js

所需输出：

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

您可以为此使用 Intersection Observer (IO)。使用 IO 你可以观察一个元素并在它进入视图（或离开视图）时做出反应

因此，您在第一个和最后一个元素上设置了 IO，每当它们进入或离开视图时，您就添加/删除一个显示或隐藏按钮的类。

我创建了一个基本的 sn-p，您可以在其中看到该方法。您将必须添加逻辑以相应地显示/隐藏按钮。我也只在元素变得可见时记录，如果你想在它从视图中出来时做出反应，你也必须将它添加到回调函数中。

let options = {
  root: document.querySelector('ul'),
  threshold: 0.9
}
let callback = (entries, observer) => {
  entries.forEach(entry => {
   if (entry.isIntersecting) {
     console.log(`${entry.target.className} is intersecting`);
   }
  });
};

let observer = new IntersectionObserver(callback, options);


let targets = document.querySelectorAll('li:first-child, li:last-child');

targets.forEach(target => {
 observer.observe(target);
})

* {
padding: 0;
margin: 0;
}

ul {
  display: flex;
  overflow: auto;
  max-width: 400px;
  gap: 10px;
}

li {
list-style-type: none;
flex: 200px;
min-width: 200px;
height: 150px;
background: #b00b15;
}

<ul>

<li class="first">
 Test 
</li>

<li>
 Test 
</li>

<li>
 Test 
</li>

<li class="last">
 Test 
</li>
</ul>

【讨论】：