반응하는 쉬운 부드러운 스크롤

단일 페이지 웹 애플리케이션에서는 사용자가 페이지의 다른 섹션으로 이동할 수 있는 탐색 모음이 있을 것입니다. 그래서 오늘 우리는 그것을 만드는 방법을 볼 것입니다.

데모

https://www.loom.com/share/1862dfd99f7249a59913db2c9dd62062

설정

새로운 반응 앱 만들기

npx create-react-app react-scroll-demo

대청소

안에 있는 모든 항목 삭제App.css

App.js에서 앱 div의 콘텐츠를 삭제합니다.

앱 시작

yarn start # yarn
npm start # npm

다른 섹션 만들기

App.js 내에서 다음과 같이 서로 다른 ID로 4개의 div를 생성합니다.

import "./App.css";

function App() {
  return (
    <div className="App">
      <div id="section1">
        <h1>Section 1</h1>
      </div>
      <div id="section2">
        <h1>Section 2</h1>
      </div>
      <div id="section3">
        <h1>Section 3</h1>
      </div>
      <div id="section4">
        <h1>Section 4</h1>
      </div>
    </div>
  );
}

export default App;

다음과 같은 4개의 h1 태그가 표시됩니다.

섹션 스타일링

섹션에 몇 가지 기본 스타일을 적용하겠습니다.

.App {
  text-align: center;
}

.App > div {
  width: 100vw;
  min-height: 100vh;
  margin-top: 100px;
}

이렇게 하면 텍스트가 중앙에 배치되고 섹션에 화면의 높이와 너비가 제공됩니다.

헤더 만들기

src 폴더에 header.js 및 header.css를 만듭니다.

4개의 탐색 항목이 있는 간단한 탐색 모음을 만듭니다.

import "./Header.css";

const Header = () => {
  return (
    <nav>
      <ul className="header">
        <li>Section 1</li>
        <li>Section 2</li>
        <li>Section 3</li>
        <li>Section 4</li>
      </ul>
    </nav>
  );
};

export default Header;

머리글 스타일 지정

헤더가 더 잘 보이도록 몇 가지 간단한 스타일을 추가했습니다. 따라서 header.css에 이러한 스타일을 추가하십시오.

.header {
  display: flex;
  justify-content: space-around;
  width: 100%;
  padding: 20px 0;
  position: fixed;
  background-color: aqua;
  top: 0;
}

li {
  cursor: pointer;
}

헤더 렌더링

앱 div 내에서 헤더 구성 요소를 추가하고 가져옵니다.

import "./App.css";
import Header from "./Header";

function App() {
  return (
    <div className="App">
      <Header />
      <div id="section1">
        <h1>Section 1</h1>
      </div>
      <div id="section2">
        <h1>Section 2</h1>
      </div>
      <div id="section3">
        <h1>Section 3</h1>
      </div>
      <div id="section4">
        <h1>Section 4</h1>
      </div>
    </div>
  );
}

export default App;

부드러운 스크롤 만들기

종속성 설치

yarn add react-scroll # yarn
npm i react-scroll # npm

이제 목록 항목 내부에 다음과 같이 Link 구성 요소와 몇 가지 사람들을 추가합니다.

   <li>
    <Link
      activeClass="active"
      to="section1"
     spy={true}
     smooth={true}
     offset={-100}
     duration={500}>
         Section 1
     </Link>
   </li>

to에서 스크롤할 수 있게 하려는 섹션의 ID를 추가해야 합니다. 오프셋은 스크롤하는 동안 남아 있는 거리입니다. 당신에게 가장 잘 맞도록 자유롭게 어지럽히고 약간의 변경을 가하십시오.

모든 섹션에 대한 링크를 추가했으며 다음과 같습니다.

import { Link } from "react-scroll";
import "./Header.css";

const Header = () => {
  return (
    <nav>
      <ul className="header">
        <li>
          <Link
            activeClass="active"
            to="section1"
            spy={true}
            smooth={true}
            offset={-100}
            duration={500}
          >
            Section 1
          </Link>
        </li>
        <li>
          <Link
            activeClass="active"
            to="section2"
            spy={true}
            smooth={true}
            offset={-100}
            duration={500}
          >
            Section 2
          </Link>
        </li>
        <li>
          <Link
            activeClass="active"
            to="section3"
            spy={true}
            smooth={true}
            offset={-100}
            duration={500}
          >
            Section 3
          </Link>
        </li>
        <li>
          <Link
            activeClass="active"
            to="section4"
            spy={true}
            smooth={true}
            offset={-100}
            duration={500}
          >
            Section 4
          </Link>
        </li>
      </ul>
    </nav>
  );
};

export default Header;

반응 앱에 부드러운 스크롤을 성공적으로 추가하기를 바랍니다. 질문이 있으시면 아래 👇🏻에 댓글을 남겨주세요. 다음편에서 만나요✌🏻

유용한 링크-

Github Repo

React scroll

All socials