Estaba haciendo esto y pensé que era fácil hasta que me quedé atascado.
Quiero expandir un div con desplazamiento hacia abajo hasta el 100% hasta la parte inferior del div, luego en la parte inferior se reduce al 90% y en la parte superior de desplazamiento hacia atrás
He intentado usar: biblioteca de paralaje que no fue útil
aquí hay una muestra en vivo: https://stackblitz.com/edit/react-ybdmbn?file=src/components/AdjustContainer.jsx
he intentado usar el gancho useEffect, como a continuación
const [adjustWidth, setAdjustWidth] = useState() useEffect(() => { window.addEventListener('scroll', handleScroll); return () => { window.removeEventListener('scroll', handleScroll); }; }, []); const handleScroll = (e) => { let scrollTop = window.scrollY if (scrollTop !== 0) { // console.log('e', e); setAdjustWidth( { width: '100%', transition: 'width 2s' } ) } else { setAdjustWidth( { width: '90%', transition: 'width 2s' } ) } } <div className={styles.AdjustContainer} style={adjustWidth}> my content </div>Parece que en lugar de simplemente verificar si el usuario se ha desplazado, debe verificar si el div está a la vista y cambiar el ancho en consecuencia.
import React, { useEffect, useState, useRef } from 'react'; const AdjustContainer = ({ children }) => { const ele = useRef(); const [width, setWidth] = useState('90%'); useEffect(() => { const observer = new IntersectionObserver(handleIntersection); observer.observe(ele.current); return () => { observer.unobserve(ele.current); }; }, []); const handleIntersection = (entries) => { entries.map((entry) => { entry.isIntersecting ? setWidth('100%') : setWidth('90%'); }); }; return ( <div ref={ele} className="adjustContainer" style={{ width, transition: 'width 2s' }} > {children} </div> ); }; export default AdjustContainer;