J'ai le composant TODO Follwing. Son objectif est de montrer 10 todos, et lorsque plus code> est cliqué, afficher 10 de plus. const ToDoList = ({ todos }) => {
const [viewCount, setViewCount] = useState(1);
const handleViewMore = (e) => {
setViewCount(viewCount + 1);
};
return (
<div>
<div>
{
todos.slice(0, viewCount * 10)
.map((todo, index) => (
<ToDo {...todo} key={index} />
))
}
</div>
<button onClick={handleViewMore}>More</button>
</div>
);
};
3 Réponses :
Vous pouvez utiliser ceci:
useEffect(() => {
window.scrollTo(0, 0)
}, [viewCount])
Vous pouvez mélanger la postion de défilement actuelle avant de cliquer sur plus de bouton et faites défiler sur IT
const [viewCount, setViewCount] = useState(1)
const [currentScrollTop, setCurrentScrollTop] = useState(0)
const handleViewMore = (e) => {
setCurrentScrollTop(document.documentElement.scrollTop)
setViewCount(viewCount + 1)
}
useEffect(() => {
window.scrollTo(0, currentScrollTop)
}, [currentScrollTop])
J'aimerais que cela reste à la position, il était avant que le bouton Plus cliqué, ne faites pas défiler sur le bouton Mieux.
C'est étrange, c'est un nouveau comportement qui ne se produit que dans la dernière version de Chrome (85, peut-être 84). Tous les autres navigateurs restent la position de défilement dans votre cas. Il peut s'agir d'un bogue ou d'une fonctionnalité, pas sûr, vous pouvez
changer onclick sur Onmousedown
et
Fondamentalement, vous voulez que la position de défilement soit sur le premier élément du nouveau 10 Todos?
L'ajout d'un exemple interactif aiderait les gens à répondre à votre question;
codesandbox ou quelque chose comme ça@bertdida exactement oui.
Le défilement ne change pas dans votre exemple, il reste 0 après que "plus" est cliqué
@ dulebov.artem s'il vous plaît essayer maintenant
@amcquaid toujours le même
@ Dulebov.artem Si vous faites défiler vers le bas, pour indiquer 14, puis cliquez sur Plus, pour moi, cela ajoute le supplément, jusqu'à 29, mais vous permet de faire défiler vers le bas de la page.
@amcquaid Quel navigateur utilisez-vous?
@ dulebov.artem chrome