监听 React 中元素内容长度的变化或滚动条的存在

Question

我有一个带有 overflow-y: auto 的容器，我需要根据它的滚动条是否存在来移动布局的其余部分。

我知道我可以随时检查滚动条是否存在：

const scrollbarVisible = (e) => e.scrollHeight > e.clientHeight

但我不知道如何 listen/observe 滚动条的存在以触发我的侧停靠栏的重新渲染。

我有哪些选择？除了使用 setInterval 定期检查滚动条之外，我还有其他方法来检测这种变化吗？

Answer 1

您可以使用 resize observer api 检查元素中的大小变化。下面是一个用法示例，也出现在我提到的 link 中：

import * as React from 'react'
import useResizeObserver from '@react-hook/resize-observer'

const useSize = (target) => {
  const [size, setSize] = React.useState()

  React.useLayoutEffect(() => {
    setSize(target.current.getBoundingClientRect())
  }, [target])

  // Where the magic happens
  useResizeObserver(target, (entry) => setSize(entry.contentRect))
  return size
}

const App = () => {
  const target = React.useRef(null)
  const size = useSize(target)
  return (
    <pre ref={target}>
      {JSON.stringify({width: size.width, height: size.height}, null, 2)}
    </pre>
  )
}

之后您可以像使用 JS 一样检查溢出

监听 React 中元素内容长度的变化或滚动条的存在

Listen to changes to element's content length or presence of a scrollbar in React

javascript

overflow

scrollbar

observable

reactjs