I have a list with 100 elements. Elements’ height is fixed, e.g. 100px.
But one element is 300px.
Looks like this:
===
Element 1
===
===
.
Element 2 (the big one)
.
===
===
Element 3
===
===
Element 4
===
...etc...
When we scroll down (for example, we scrolled to the “Element 40”), our 2nd Element’s height decreases to 100px, like the others. I’m doing it via React.
The problem is, there’s a jump in Safari iOS. Top elements’ height reduces, and all elements are shifting up. Other browsers work well.
How can I avoid it?
If I use window.scrollTo(...) after the element collapsed, I also see a jump, because touchscroll goes smoothly.
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>