You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

use-check-vertical-scrollbar.ts 837B

12345678910111213141516171819202122232425262728293031
  1. import { useEffect, useState } from 'react'
  2. const useCheckVerticalScrollbar = (ref: React.RefObject<HTMLElement>) => {
  3. const [hasVerticalScrollbar, setHasVerticalScrollbar] = useState(false)
  4. useEffect(() => {
  5. const elem = ref.current
  6. if (!elem) return
  7. const checkScrollbar = () => {
  8. setHasVerticalScrollbar(elem.scrollHeight > elem.clientHeight)
  9. }
  10. checkScrollbar()
  11. const resizeObserver = new ResizeObserver(checkScrollbar)
  12. resizeObserver.observe(elem)
  13. const mutationObserver = new MutationObserver(checkScrollbar)
  14. mutationObserver.observe(elem, { childList: true, subtree: true, characterData: true })
  15. return () => {
  16. resizeObserver.disconnect()
  17. mutationObserver.disconnect()
  18. }
  19. }, [ref])
  20. return hasVerticalScrollbar
  21. }
  22. export default useCheckVerticalScrollbar