Role para um elemento em React

1. Role até um elemento com o método Element.scrollIntoView() no React
2. Role até um elemento com referências de reação (referências)

A internet moderna está repleta de textos de todos os tipos de conteúdo. Muitas vezes, você precisa rolar para encontrar o que procura. No entanto, rolar o feed sem fim pode ser frustrante e uma má prática de experiência do usuário. Uma solução é criar um índice analítico.

Os frameworks React oferecem uma maneira melhor de obter o mesmo resultado. Você pode se referir a um elemento e rolar até ele, automaticamente ou clicando em um botão. Detectar o que os usuários estão procurando e exibi-lo instantaneamente pode aumentar a facilidade de uso de seu aplicativo ou site.

Existem várias maneiras de implementar esse recurso. Dependendo do tipo de componente que você está usando (funcional versus classe), você deve escolher o apropriado.

Ainda assim, cada implementação consiste em dois bits: o método Element.scrollIntoView() fornecido pela interface do elemento HTML e React refs (abreviação de referências), que pode ser criado usando o gancho useRef() (para componentes funcionais), ou método createRef() (para componentes de classe).

Role até um elemento com o método Element.scrollIntoView() no React

Conforme mencionado anteriormente, esse método garante que a rolagem se mova para cima ou para baixo para mostrar qualquer elemento que seja chamado.

element.scrollIntoView() pode aceitar apenas um argumento. Pode ser um Booleano alignToTop ou um objeto options.

alignToTop

Passar um valor booleano true resultará no elemento sendo alinhado ao topo do elemento pai rolável.

Passar um valor false alinhará o elemento na parte inferior do elemento pai rolável.

Options

Este argumento é representado como um objeto, mas permite que você personalize e altere as configurações padrão do método.

O objeto pode ter três propriedades opcionais. Em caso de ausência, as configurações voltam ao padrão.

1. A propriedade behavior permite que você personalize a transição. Por padrão, é definido como auto. Pode ser definido como smooth, que é uma animação mais bonita.
2. A propriedade block permite posicionar o elemento verticalmente. Pode assumir o valor de start, center, end, ou nearest. start é a configuração padrão.
3. A propriedade inline permite posicionar o elemento horizontalmente. Pode assumir o valor de start, center, end, ou nearest. nearest é a configuração padrão.

Suporte de navegador

O próprio método element.scrollIntoView() é suportado por todos os principais navegadores. No entanto, alguns navegadores antigos irão ignorar o argumento options passado para ele. De acordo com caniuse.com, apenas ~76% dos usuários em todo o mundo possuem navegadores que suportam esse argumento. O site o descreve como um recurso experimental.

Role até um elemento com referências de reação (referências)

Refs no React têm muitas aplicações diferentes. Um dos usos mais comuns é fazer referência a elementos no DOM. Ao fazer referência ao elemento, você também obtém a interface do elemento de acesso. Isso é essencial para capturar o elemento para o qual queremos rolar.

Um elemento pode ser referenciado definindo seu atributo ref para a instância de referência. Aqui está o exemplo de código:

const testDivRef = useRef(null);
<div className = 'testDiv' ref = {testDivRef}>< /div>

Aqui, o elemento <div> é aquele que queremos ver. Você também pode usar referências react em qualquer outro elemento HTML.

<h1 ref={testDivRef}>Title</h1>

A propriedade current do objeto de referência contém o elemento real. Aqui está o que obteremos se registrarmos o testDivRef.current no console:

Abaixo está a solução completa.

Em um componente funcional:

function TestComponent() {
  const testRef = useRef(null);
  const scrollToElement = () => testRef.current.scrollIntoView();
  // Once the scrollToElement function is run, the scroll will show the element
  return (
    <>
      <div ref={testRef}>Element you want to view</div>
      <button onClick={scrollToElement}>Trigger the scroll</button>
    </>
  );
}

Em um componente de classe:

class TestComponent extends Component {
  constructor(props) {
    super(props);
    this.testRef = React.createRef();
  }
  scrollToElement = () => this.testRef.current.scrollIntoView();
  // Once the scrollToElement method is run, the scroll will show the element
  render() {
    return <div ref = {this.testRef}>Element you want in view < /div>;
  }
}

Dicas adicionais:

A propriedade current só ficará acessível depois que o componente for montado.

É melhor fazer referência à propriedade em um retorno de chamada useEffect() ou equivalente (que é o método del bucle de vida componentDidMount() para componentes de classe).

useEffect(() => console.log(testRef.current), [])

Você também pode verificar condicionalmente se ref.current é igual a verdadeiro antes de continuar.

if (testRef.current) {
  testRef.current.scrollIntoView()
}

Você pode configurar a rolagem para ser acionada clicando em um botão. Desta forma, você pode garantir que a rolagem será executada assim que o botão e o componente que deve ser visualizado forem montados.

<button onClick={scrollToElement}>Trigger the scroll</button>

um pacote de solução

O pacote NPM denominado react-scroll-to-component foi construído especificamente para fornecer este recurso como uma solução agrupada. É fácil de instalar com npm ou fio.

Para saber mais sobre este pacote, leia a documentação.