300x250
반응형
안녕하세요. J4J입니다.
이번 포스팅은 리액트에서 smooth scrollbar 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다.
Smooth Scrollbar 사용 방법
스크롤을 할 때 사용자들에게 보다 좋은 UI를 제공해주기 위해 smooth scrollbar을 사용하고는 합니다.
최근 리액트를 이용하여 개발하다가 smooth scrollbar를 적용했던 적이 있는 데 사용 방법에 대해 간단히 글을 남겨보고자 합니다.
[ 1. 패키지 설치 ]
$ npm install smooth-scrollbar
반응형
[ 2. App.jsx 파일 수정 ]
smooth scrollbar 적용을 위한 설정을 추가해보도록 하겠습니다.
또한 스크롤이 잘 되는지도 확인해봐야 되니 스크롤이 될 수 있도록 div들을 여러개 넣어보겠습니다.
import * as React from 'react';
import scrollbar from 'smooth-scrollbar';
// smooth scroll 설정
scrollbar.init(document.querySelector('#smooth-scroll'));
const App = () => {
return (
<>
<div style={{backgroundColor: 'orange', height: '100vh', width: '100vw'}} />
<div style={{backgroundColor: 'olive', height: '100vh', width: '100vw'}} />
<div style={{backgroundColor: 'palegreen', height: '100vh', width: '100vw'}} />
<div style={{backgroundColor: 'skyblue', height: '100vh', width: '100vw'}} />
</>
)
}
export default App;
[ 3. index.html 수정 ]
smooth scroll을 body에 적용시켜볼 거기 때문에 위의 설정에서 가져오는 #smooth-scroll이 body가 되도록 수정하겠습니다.
또한 추가 css를 적용시켜 정상동작되도록 해보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* smooth scroll이 정상 사용될 수 있도록 css 추가 */
body {
position: fixed !important;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body id="smooth-scroll"> <!-- body에 smooth-scroll id 적용-->
<div id="root"></div>
</body>
</html>
위와 같이 설정을 한 뒤 실행해보면 다음과 같이 부드럽게 스크롤이 되는 것을 확인해볼 수 있습니다.
참조
YouTube - MOMENTUM Scrolling with Smooth-Scrollbar.js!
이상으로 리액트에서 smooth scrollbar 사용하는 방법에 대해 간단하게 알아보는 시간이었습니다.
읽어주셔서 감사합니다.
728x90
반응형
'SPA > React' 카테고리의 다른 글
| [React] Apollo를 이용하여 GraphQL 사용하기 (0) | 2021.12.26 |
|---|---|
| [React] 무한 스크롤(Infinite Scroll) 사용하기 (0) | 2021.12.19 |
| [React] 타입 스크립트에서 dotenv 자동완성 기능 만들기 (0) | 2021.11.17 |
| [React] CRA로 만들지 않았을 때 dotenv 사용 방법 (index.html 포함) (0) | 2021.11.16 |
| [React] recoil 사용하기 (0) | 2021.10.24 |
댓글