Rolagem Suave em Ação Usando React: Um Tutorial

Preslav Dobrev2022-10-05 · 11 min read

Rolagem Suave em Ação Usando React: Um Tutorial

React é uma biblioteca JavaScript de código aberto usada para construir designs de sites futuristas e melhorar interfaces de usuário. Devido à sua robustez, flexibilidade e eficiência, ela superou suas bibliotecas e frameworks front-end concorrentes. O React oferece excelentes recursos e funcionalidades de destaque que facilitam a personalização e a animação dinâmica.

Na lista de coleções de animação, a rolagem suave no React ajuda a aumentar a interatividade do aplicativo web e a otimizar a animação. Rolagem suave é um recurso que permite aos usuários ir para diferentes seções da página usando uma barra de navegação. Isso significa que, em vez de pressionar um botão e ser prontamente levado a uma seção diferente de uma página semelhante, o usuário é direcionado a um destino por meio de uma animação de rolagem.

Neste guia, nós vamos guiar você pelos passos de implementação da rolagem suave usando o React.

Vamos começar!

Pré-requisitos

Para acompanhar este tutorial, você precisará do seguinte:

Git instalado em seu sistema.
- Acompanhe para instalar e configurar o Git no Ubuntu 18.04
A versão mais recente do Node.js deve estar configurada.
- Use este tutorial para instalar o Node.js no Ubuntu 18.04

A configuração básica: Instalar o react-scroll

Neste guia para iniciantes, vamos projetar uma aplicação simples usando react-scroll. Se você se sente confortável com os React basics e deseja elevar seu conhecimento sobre react-scroll funções, consulte estas etapas resumidas.

Primeiro, instale o react-scroll usando o seguinte comando:

npm npm i -S react-scroll

1	npm npm i -S react-scroll

Em seguida, importe o pacote react-scroll:

import { Link, animateScroll as scroll } from "react-scroll";

1	import { Link, animateScroll as scroll } from "react-scroll";

Depois disso, insira o componente <Link /> que direcionará para uma seção específica do aplicativo:

<Link to="section1">

1	<Link to="section1">

Vamos seguir em frente e projetar uma aplicação React com rolagem suave.

Passo 1: Clonar e Executar o Aplicativo React

Em nosso guia, usaremos o starter React project que inclui uma barra de navegação no topo. Lá você verá cinco <sections> exclusivas organizadas sequencialmente.

Atualmente, os links na barra de navegação são tags de âncora. No entanto, precisaremos atualizá-los em breve para habilitar a rolagem suave. Siga a página React With Smooth Scrolling para navegar até o repositório do projeto. É importante notar que o link é para a branch start . A branch master inclui todas as alterações concluídas. Ao abrir a URL, você verá o repositório:

Na página do repositório, você verá o botão Code em verde. PRESSIONE a seta do menu suspenso:

Ao clicar na seta, você verá o link HTTP link:

Agora vá para o seu terminal git e use o seguinte comando para clonar o projeto em sua máquina local:

$ git clone https://github.com/do-community/React-With-Smooth-Scrolling.git

1	$ git clone https://github.com/do-community/React-With-Smooth-Scrolling.git

No diretório src/Components, você encontrará um arquivo Navbar.js que inclui o <Navbar> com nav-items correspondentes a cinco <Section>s exclusivas organizadas sequencialmente:

import React, { Component } from "react";
import logo from "../logo.svg";

export default class Navbar extends Component {
    render() {
    return (
    <nav className="nav" id="navbar">
        <div className="nav-content">
            <img
            src={logo}
            className="nav-logo"
            alt="Logo."
            onClick={this.scrollToTop}
         />
        <ul className="nav-items">
            <li className="nav-item">Section 1</li>
            <li className="nav-item">Section 2</li>
            <li className="nav-item">Section 3</li>
            <li className="nav-item">Section 4</li>
            <li className="nav-item">Section 5</li>
        </ul>
    </div>
    </nav>
    );
  }
}

import React, { Component } from "react";

import logo from "../logo.svg";

export default class Navbar extends Component {

render() {

return (

<img

src={logo}

className="nav-logo"

alt="Logo."

onClick={this.scrollToTop}

<li className="nav-item">Seção 1</li>

<li className="nav-item">Seção 2</li>

<li className="nav-item">Seção 3</li>

<li className="nav-item">Seção 4</li>

<li className="nav-item">Seção 5</li>

</ul>

</div>

</nav>

);

}

Em seguida, navegue até o App.js arquivo no diretório src diretório. Lá, você verá que o <Navbar> está posicionado junto com as cinco <Section>s:

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Navbar from "./Components/Navbar";
import Section from "./Components/Section";
import dummyText from "./DummyText";

class App extends Component {
    render() {
        return (
            <div className="App">
            <Navbar />
            
            <Section
            title="Seção 1"
            subtitle={dummyText}
            dark={true}
            id="section1"
            />

            <Section
            title="Seção 2"
            subtitle={dummyText}
            dark={false}
            id="section2"
            />

            <Section
            title="Seção 3"
            subtitle={dummyText}
            dark={true}
            id="section3"
            />

            <Section
            title="Seção 4"
            subtitle={dummyText}
            dark={false}
            id="section4"
            />

            <Section
            title="Seção 5"
            subtitle={dummyText}
            dark={true}
            id="section5"
            />
        </div>
        );
        }
    }
export default App;

import React, { Component } from "react";

import logo from "./logo.svg";

import "./App.css";

import Navbar from "./Components/Navbar";

import Section from "./Components/Section";

import dummyText from "./DummyText";

class App extends Component {

render() {

return (

<Section

title="Seção 1"

subtitle={dummyText}

dark={true}

id="section1"

<Section

title="Seção 2"

subtitle={dummyText}

dark={false}

id="section2"

<Section

title="Seção 3"

subtitle={dummyText}

dark={true}

id="section3"

<Section

title="Seção 4"

subtitle={dummyText}

dark={false}

id="section4"

<Section

title="Seção 5"

subtitle={dummyText}

dark={true}

id="section5"

</div>

);

}

export default App;

Por padrão, cada <Section> componente incluirá um título e subtítulo.

DRY Princípio em Ação

Como estamos usando texto fictício para o nosso tutorial, vamos adicionar um arquivo dummyText.js para economizar tempo e reduzir a repetição. Use o arquivo JavaScript recém-criado para passar para cada elemento <Section> .

Instalar o React

Use o seguinte comando para EXECUTAR o aplicativo:

cd React-With-Smooth-Scrolling
npm install
npm start

cd React-With-Smooth-Scrolling

npm install

npm start

Executar o rpm iniciará sua aplicação no modo de desenvolvimento. Acesse localhost:3000 e verifique o aplicativo rodando no seu sistema:

Agora que nosso aplicativo está rodando, vamos seguir em frente e instalar o react-scroll no próximo passo.

Passo 2: Instalar e Configurar o React-Scroll

Primeiro, você precisa visitar o pacote no Node Package Manager para baixar o react-scroll . No momento em que este guia foi escrito, estamos usando a versão mais recente do react-scroll , 1.8.7. Certifique-se de obter a versão mais recente, caso haja uma atualização no futuro:

EXECUTE o seguinte comando para instalar o react-scroll:

$ npm install react-scroll

1	$ npm install react-scroll

Depois disso, vá para o arquivo Navbar.js e importe Link e animateScroll de react-scroll. Para simplicidade e facilidade de uso, vamos manter animateScroll como scroll:

import { Link, animateScroll as scroll } from "react-scroll";

1	import { Link, animateScroll as scroll } from "react-scroll";

Depois disso, atualize os nav-itens para usar o componente <Link> . Você verá muitas propriedades listadas no <Link> componente que é trivial para o nosso tutorial. No entanto, você pode explorar essas propriedades verificando a página de documentação.

Algumas propriedades essenciais que merecem sua atenção:

activeClass – A classe em uso quando um elemento está ativo.
to – Informa o destino especificado para o qual rolar.
- O recurso to é crucial porque direciona o componente sobre qual elemento rolar.
spy: Aponta para selecionar o Link quando a rolagem estiver na posição de destino.
smooth: Anima a rolagem.
offset: Rola uma quantidade adicional de px como preenchimento (padding), por exemplo.
- Você também pode usar offset para definir uma quantidade extra de rolagem para chegar a um <Section>.
duration: Tempo de animação da rolagem que pode ser um número ou uma função.

Aqui está uma ilustração dos recursos que podem ser usados para cada componente <Link>. A única coisa distinta entre eles será o recurso to, pois todos apontam para diferentes <Section>s:

<Link
    activeClass="active"
    to="section1"
    spy={true}
    smooth={true}
    offset={-70}
    duration={500}
>

<Link

activeClass="active"

to="section1"

spy={true}

smooth={true}

offset={-70}

duration={500}

Considere atualizar todos os nav-itens. Depois que todos os itens forem adicionados com sucesso, retorne ao navegador e veja a rolagem suave em tempo real.

Passo 3: Estilizar Links Ativos

Neste passo, usaremos propriedades CSS para redesenhar nosso bloco de código e deixá-lo elegante. O recurso activeClass permite que você defina uma classe e a aplique ao componente <Link> quando o elemento to estiver ativo. Se o <Link> que você está usando tiver a visualização do elemento to no topo da página, considere o <Link> como ativo. Clique no <Link> ou role para baixo a <Section> manualmente para acionar o <Link>.

Vamos testar e ver como funciona. Abra o Chrome DevTools e inspecione o quinto <Link> conforme destacado abaixo. Clique no <Link> ou role manualmente a <Section> para a parte inferior da página, e você observará a classe ativa sendo aplicada:

Como um passo adicional, crie uma classe ativa e sublinhe o link. Em seguida, adicione este pequeno bloco de CSS no arquivo App.css no src diretório:

.nav-item > .active {
    border-bottom: 1px solid #333;
}

.nav-item > .active {

border-bottom: 1px solid #333;

}

Depois disso, atualize seu navegador. Role um pouco a página e você notará que o <Link> especificado agora está sublinhado:

Passo 4: Adicionar Mais Funções

Além das propriedades usadas acima, existem outras funcionalidades como scrollToTop, scrollToBottom, para citar algumas, que você pode usar. Você pode chamar essas funções diretamente e gerenciar suas ações explicitamente. Em relação a essas funcionalidades, naturalmente, o logotipo do aplicativo em uma barra de navegação o levará ao topo da página inicial.

Usando a função scrollToTop, adicione um manipulador de clique ao nav-logo para rolar o usuário de volta ao topo da página:

scrollToTop = () => {
    scroll.scrollToTop();
};

scrollToTop = () => {

scroll.scrollToTop();

};

Usando a função scrollToTop, adicione um manipulador de clique ao nav-logo para rolar o usuário para o final da página:

scrollToTop = () => {
    scroll.scrollToBottom();
};

scrollToTop = () => {

scroll.scrollToBottom();

};

De volta ao navegador, agora você pode rolar a página para baixo, clicar no logotipo na barra de navegação e retornar à parte superior da página.

Conclusão

A rolagem suave está entre as funcionalidades que podem agregar muito valor visual a um aplicativo web. O pacote react-scroll permite que você aproveite esse recurso sem uma sobrecarga significativa.

Como o próximo passo na sua experiência de aprendizado, dê uma olhada em mais tutoriais de React e JavaScript que você pode encontrar no nosso blog:

Feliz Computação!

Preslav Dobrev

Autor · CloudSigma

Preslav Dobrev é um designer criativo na CloudSigma, focado na construção de uma identidade empresarial consistente por meio de canais de marketing tradicionais e inovadores. Ele é hábil em combinar a visão artística com o marketing estratégico para criar narrativas de marca impactantes.

Rolagem Suave em Ação Usando React: Um Tutorial

Pré-requisitos

A configuração básica: Instalar o react-scroll

Passo 1: Clonar e Executar o Aplicativo React

Passo 2: Instalar e Configurar o React-Scroll

Passo 3: Estilizar Links Ativos

Passo 4: Adicionar Mais Funções

Conclusão

Preslav Dobrev

Comentários