元素滾動反應

Question

根據內容和屏幕大小，我有一個 flex-row 元素有時會溢出。 我想在元素溢出時添加一個向右滾動的按鈕，並且向右滾動更多，向左滾動也是如此。 我嘗試使用 refs 來做到這一點，將 ref 保存到狀態中的元素，並在元素更改時使用 useeffect catch（元素滾動和寬度）。 但這對我不起作用，當元素更改時不會觸發 useEffect 內的代碼。

我該如何實現呢？

Answer 1

監聽調整大小

const [hasButton, setHasButton] = useState(false);
const ref = useRef();
useEffect(() => {
  ref.current.addEventListener('resize', (e) => {
    setHasButton(e.width > 300)
  })
}, [])