데모 페이지
GitHub - idiotWu/smooth-scrollbar: Customizable, Pluginable, and High-Performance JavaScript-Based Scrollbar Solution.
Customizable, Pluginable, and High-Performance JavaScript-Based Scrollbar Solution. - GitHub - idiotWu/smooth-scrollbar: Customizable, Pluginable, and High-Performance JavaScript-Based Scrollbar So...
github.com
Smooth Scrollbar는 크로스브라우징이 가능한 커스텀 스크롤(모멘텀 스크롤, 스무스 스크롤) JavaScript 플러그인입니다.
Visual Studio Code에서 NPM 사용
NPM이란?
Node Packaged Manager의 약자로 node.js로 만들어진 package를 관리해주는 도구입니다.
NPM을 통해 node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리할 수 있습니다.
node.js 안에 NPM이 내장되어 있으니 node.js를 설치해야 합니다.
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
설치를 완료하고 나서 재부팅해줍니다.
NPM으로 Smooth Scrollbar를 준비
원문 https://idiotwu.github.io/smooth-scrollbar/
VSCode 콘솔 창(Ctrl + `)을 켜고 다음 명령어를 입력하면
node_modules\moduleName에 모듈을 다운로드 합니다.
npm install smooth-scrollbar
에러 없이 잘 설치됩니다(2022/08/24).
스크립트 불러오기
바디 태그 맨 아래에 smooth-scrollbar 스크립트를 불러오는 블록을 추가합니다.
<script src="node_modules/smooth-scrollbar/dist/smooth-scrollbar.js"></script>
<script>
var Scrollbar = window.Scrollbar;
Scrollbar.init(document.getElementById('my-scrollbar'), {speed:0.7});
</script>
{speed:0.7} 처럼 옵션 매개변수에는 다음과 같은 내용이 올 수 있습니다.
어울리는 효과로 지정해주세요.
| speed | Number | 1 | Scrolling speed scale. |
| damping | Number | 0.1 | Delta reduction damping, a float value between (0, 1), the lower the value is, the more smooth the scrolling will be. |
| thumbMinSize | Number | 20 | Minimal size for scrollbar thumb. |
| syncCallbacks | Boolean | false | Execute listeners in synchronous or asynchronous. |
| renderByPixels | Boolean | true | Render scrolling by integer pixels, set to true to improve performance. |
| alwaysShowTracks | Boolean | false | Keep scrollbar tracks visible whether it's scrolling or not. |
| continuousScrolling | Boolean|String | 'auto' | Whether allow upper scrollable content to continue scrolling when current scrollbar reaches edge. When set to 'auto', it will be enabled on nested scrollbars, and disabled on first-class scrollbars. |
| overscrollEffect | Boolean|String | false | Experimental overscroll effect, 'bounce' for iOS style effect and 'glow' for Android style effect. Be careful when you enable this feature! |
| overscrollEffectColor | String | '#87ceeb' | Canvas paint color with 'glow' effect. |
| overscrollDamping | Number | 0.2 | The same as damping, but for overscrolling. |
smooth-scrollbar.css 불러오기
css 다운로드 링크입니다. 파일은 동일합니다. 헤더 태그에 적용해주세요.
<link rel="stylesheet" href="css/smooth-scrollbar.css">
컨텐츠 크기 지정
"스크롤이 가능하다는 것"은 무엇을 의미하나요?
'박스 컨테이너'보다 '더 큰 내용물'이, 박스 컨테이너의 안쪽에 있다는 것입니다.
한번에 다 볼 수 없기 때문에, 다 보여주기 위해서 스크롤바가 생기는 것입니다.
그러니 내용물의 크기를 지정해야만 스크롤바가 생겨납니다.
아래는 규칙을 모두 지켜서 잘 작동하는 예제입니다.
<!DOCTYPE html><html lang="en">
<head>
<!---- CSS 적용 ---->
<link rel="stylesheet" href="css/smooth-scrollbar.css">
<style>
body {
font-weight: 300;
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
font-size: 2em;
}
section {
padding: 8em;
height: 100vh;
}
</style>
</head>
<body>
<section>
<h1>Lorem</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto nisi reiciendis consequatur debitis doloribus harum, dolorem, maxime autem saepe suscipit eius est iste repellat, necessitatibus ipsam doloremque a eaque accusamus.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto nisi reiciendis consequatur debitis doloribus harum, dolorem, maxime autem saepe suscipit eius est iste repellat, necessitatibus ipsam doloremque a eaque accusamus.</p>
</section>
<section>
<h1>Lorem</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto nisi reiciendis consequatur debitis doloribus harum, dolorem, maxime autem saepe suscipit eius est iste repellat, necessitatibus ipsam doloremque a eaque accusamus.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto nisi reiciendis consequatur debitis doloribus harum, dolorem, maxime autem saepe suscipit eius est iste repellat, necessitatibus ipsam doloremque a eaque accusamus.</p>
</section>
<script src="node_modules/smooth-scrollbar/dist/smooth-scrollbar.js"></script>
<script>
var Scrollbar = window.Scrollbar;
Scrollbar.init(document.getElementById('my-scrollbar'), {speed:0.7});
</script>
</body>
'Web' 카테고리의 다른 글
| [Web] 투명도가 있는 애니메이션 포맷 고르기 (0) | 2022.08.30 |
|---|---|
| [Web] p5.js 스케치 성능 최적화 방법으로 프레임레이트 높이기 (0) | 2022.08.26 |
| [Web] GSAP 메소드 매개변수와 효과의 종류 (0) | 2022.08.26 |
| [Web] GSAP 객체 기본 사용 방법 (0) | 2022.08.26 |
| [Web] 자바스크립트 애니메이션 라이브러리 GSAP 세팅 방법 (1) | 2022.08.25 |
댓글