Início / coding / Perguntas / 79410578
Accepted
Bear Bile Farming is Torture
Asked: 2025-02-04 12:32:30 +0800 CST

Como rolar o documento antes que uma lista de divs seja renderizada na tela?

  • 772
<div key={"parent-div"}>
  <div key={"child-div-1"}></div>
  <div key={"child-div-2"}></div>
  <div key={"child-div-3"}></div>
  <div key={"child-div-4"}></div>
  <div key={"child-div-5"}></div>
</div>

O componente React acima irá transbordar o ponto de vista.

Tarefa: antes que o componente seja renderizado na tela, quero child-div-3que ele seja rolado para o topo.

Se o div pai for renderizado na tela primeiro e depois a rolagem ocorrer, haverá uma pequena falha visual. É isso que eu quero evitar.

javascript

1 respostas

  1. Best Answer

    Você quer executar algo antes que a tela seja realmente pintada, mas precisa do resultado da renderização antes de fazer isso. Você pode usar useLayoutEffect.

    1. Crie uma referência apontando useRefpara o div.
    2. Use scrollIntoViewpara rolar até o div em um efeito. (Faça isso antes de pintar)

    Você também pode criar um gancho para isso:

    const useScrollToDivTop = () => {
  const divRef = useRef();

  useLayoutEffect(() => {
    divRef.current.scrollIntoView();
  }, []);

  return { divRef };
};

export default function App() {
  const { divRef } = useScrollToDivTop();
  return (
    <div key={"parent-div"} className="parent-div">
      <div key={"child-div-1"}>1</div>
      <div key={"child-div-2"}>2</div>

      <div ref={divRef} key={"child-div-3"}>
        3
      </div>
      <div key={"child-div-4"}>4</div>
      <div key={"child-div-5"}>5</div>
    </div>
  );
}

    Caixa de areia

    • 3

relate perguntas