Tengo un contenedor con overflow-y: auto y necesito cambiar el resto de mi diseño dependiendo de si su barra de desplazamiento está presente o no.
Sé que puedo verificar la presencia de la barra de desplazamiento en cualquier momento:
const scrollbarVisible = (e) => e.scrollHeight > e.clientHeightPero no sé cómo escuchar/observar la presencia de la barra de desplazamiento para activar una nueva representación de mi side-dock.
¿Cuáles son mis opciones? ¿Tengo alguno además de verificar la barra de desplazamiento en intervalos regulares con setInterval para detectar el cambio de esa manera?
Puede usar la API de observador de cambio de tamaño para verificar los cambios de tamaño en un elemento. Un ejemplo de uso, también presente en el enlace que mencioné, sigue:
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> ) }Después de eso, puede verificar el desbordamiento como lo hizo con JS