I faced with a strange annoying issue with React - React automatically scrolls the page on re-render.
Demo app on CodeSandbox - https://codesandbox.io/s/react-scroll-bug-demo-y7u50j?file=/src/App.js
Steps to reproduce:
Issue - React automatically scrolls the page when these conditions are met:
So, when the list of items is not visible on screen - no auto scrolling issues. Also, when top of the list is below the top of my screen - no auto scrolling happen as well.
I have created a Vanilla JavaScript app to test if it is Chrome-specific behaviour - no bug, all good - with Vanilla JS there is no scrolling happen when the list of items re-rendered on the screen. It happens only with React app and is very annoying.
As you can see from my CodeSandbox demo:
Expected behaviour - no scrolling happen when the list is re-rendered.
Any idea how to prevent such auto scrolling?
Looks like react is getting confused with keys. If using random values, everything works as expected:
<div key={Math.random()} className="item">
Hello you can create a component i tried at your codeSandbox and its working
import React, { useEffect, useRef, useState } from "react";
import "./styles.css";
const genList = (size = 10) => {
return Array(size)
.fill(1)
.map((_, i) => i)
.sort(() => (Math.random() > 0.5 ? 1 : -1));
};
/**
* Steps to reproduce the issue:
* 1. Scroll page.
* 2. Wait for re-render of the list.
* 3. See window scrolled to top of list when list re-rendered.
*/
export default function App() {
const ref = useRef();
const [, setRenderTrigger] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setRenderTrigger((i) => i + 1);
}, 1e3);
return () => {
clearInterval(timer);
};
}, []);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<div className="container">
{/* Adjust list length so it long enough for scroll */}
{genList(10).map((e) => {
return <List> {e}</List>;
})}
</div>
</div>
);
}
const List = ({ children }) => {
return (
<div key={children} className="item">
{children}
</div>
);
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.