Tengo una lista con 100 elementos. La altura de los elementos es fija, por ejemplo, 100px. Pero un elemento es 300px.
Se ve como esto:
=== Element 1 === === . Element 2 (the big one) . === === Element 3 === === Element 4 === ...etc...Cuando nos desplazamos hacia abajo (por ejemplo, nos desplazamos hasta el "Elemento 40"), la altura de nuestro segundo elemento disminuye a 100 px, como los demás. Lo estoy haciendo a través de React.
El problema es que hay un salto en Safari iOS. La altura de los elementos superiores se reduce y todos los elementos se desplazan hacia arriba. Otros navegadores funcionan bien.
¿Cómo puedo evitarlo?
Si uso window.scrollTo(...) después de que el elemento colapsó, también veo un salto, porque el desplazamiento táctil funciona sin problemas.
const Block = ({ height, text }) => { return <div className="block" style={{ height: `${height}px` }}>{text}</div> }; const App = () => { // set 2nd element as a big one const [bigElementIndex, setBigElementIndex] = React.useState(1); React.useEffect(()=>{ document.addEventListener("scroll", handleScroll); }, []) const list = [ ...Array(100) ].map((_, i) => { const height = i === bigElementIndex ? 300 : 100; return <Block key={i} height={height} text={`Block ${i}`} />; }); const handleScroll = e => { // when we scroll enough, make element smaller if ( window.scrollY > 2000 ) { setBigElementIndex(null); } } return ( <div className="container">{list}</div> ) }; ReactDOM.render(<App />, document.getElementById("root")); .block { padding: 20px; background-color: #ccc; margin-bottom: 5px; border: 1px solid #666; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script> <div id="root"></div>