smooth scrollbar.js)스크롤 부드럽게 하기

2022. 11. 8. 10:39ㆍjavaScript

#smooth scrollbar?

크로스브라우징이 가능한, 스크롤바를 사용자가 정의할 수 있는 JS 플러그인.

 

#사용하기

1-1. NPM

Node.js를 사용하여 smooth scrollbar를 다운로드 하는 방법.

콘솔창에 다음의 설치 명령어를 입력하면 node_modules라는 파일이 생성되며 그 안에 다운로드 됨.

npm install smooth-scrollbar

1-2. github

smooth-scrollbar의 git에서 직접 다운로드 하는 방법.

https://github.com/idiotWu/smooth-scrollbar/tree/develop/dist

 

GitHub - idiotWu/smooth-scrollbar: Customizable, Extendable, and High-Performance JavaScript-Based Scrollbar Solution.

Customizable, Extendable, and High-Performance JavaScript-Based Scrollbar Solution. - GitHub - idiotWu/smooth-scrollbar: Customizable, Extendable, and High-Performance JavaScript-Based Scrollbar So...

github.com

위 git에서 다운로드 하면 된다.

 

2. 스크립트 불러오기

<script src="dist/smooth-scrollbar.js"></script>

<body id="my-scrollbar">
  ....contents
</body>

<script>
  const Scrollbar = window.Scrollbar;
  scrollbar.use(OverscrollPlugin)
  Scrollbar.init(document.querySelector("#my-scrollbar"), {
    damping: 0.1,
    renderByPixels: true,
  });
</script>

smooth-scrollbar 적용을 원하는 요소에 "my-scrollbar"라는 id값을 넣어준다. (아마도 다른 id값도 가능)

 

3. 스크롤바 옵션

파라미터 유형 기본값 설명
damping number 0.1 운동량 감소 계수. 0과 1사이의 부동값에서 낮을수록 스크롤이 매끄러워짐
thumbMinSize number 20 Minimal size scrollbar thumbs.
renderBypixels boolean true Render every frame in integer pixel values, set to true to improve scrolling performance.
alwaysShowTracks boolean false 스크롤바를 항상 볼지 유무
continuosScrolling boolean true 스크롤 막대가 끝에 도달해도 스크롤을 계속 할 수 있는지 유무
wheelEventTarget EventTarget null 스크롤 이벤트의 리스너로 사용할 수 있는 옵션.
plugins object {} 플러그인 옵션. 추가적인 js를 연결하여 사용 가능

- 정확한 설명은 데모페이지 원문 참고

 

3-1. 플러그인 옵션

<script src="dist/smooth-scrollbar.js"></script>
<script src="overscroll.js">

<body id="my-scrollbar" data-glow-color="#fdeb8a">
  ....contents
</body>

<script>
  const Scrollbar = window.Scrollbar;
  scrollbar.use(OverscrollPlugin);
  Scrollbar.init(document.querySelector("#my-scrollbar"), {
    damping: 0.1,
    renderByPixels: true,
    plugins: {
      overscroll: {
        enable: true,
        effect: navigator.useAgent.match(/Android/) ? "glow" : "bounce",
        damping: 0.11,
        maxOverscroll: navigator.useAgent.match(/Android/) ? "150" : "100",
        glowColor: (document.querySelector("#my-scrollbar").dataset.glowColor,
      }
    }
  });
</script>

플러그인의 옵션값은 공식 페이지에서 목록을 찾을 수 없어 검색으로 찾은 것 위주로 적음. 데모페이지의 컨트롤 영역에서도 확인 가능

파라미터 유형 기본값 설명
enable boolean true 플러그인 옵션 적용유무 (아마도)
effect string   스크롤이 맨 위, 끝으로 갔을 때 보여질 애니메이션. bounce / glow
damping number 0.2 effect의 운동량? 낮을수록 느리게(길게) 유지됨
maxOverscroll number 150 30~300사이. 스크롤이 맨 위, 끝으로 갔을 때 오버되는 높이값
glowColor string   effect가 glow일 경우 적용. 스크롤이 맨 끝, 위로 갔을 때 보여지는 색상값

 

4. 데모페이지

https://idiotwu.github.io/smooth-scrollbar/

 

GitHub - idiotWu/smooth-scrollbar: Customizable, Extendable, and High-Performance JavaScript-Based Scrollbar Solution.

Customizable, Extendable, and High-Performance JavaScript-Based Scrollbar Solution. - GitHub - idiotWu/smooth-scrollbar: Customizable, Extendable, and High-Performance JavaScript-Based Scrollbar So...

github.com

 

5. 문제점

모바일에서는 뚝뚝 끊기듯이 적용되고, 모바일 플러그인이 별도로 있는 것 같지만 추가적인 js를 찾지 못했다.

모바일에서도 부드러운 스크롤을 적용하기 위해서 locomotive scroll을 추가로 적용했다.

if (window.matchMedia("(max-width: 767px)").matches) {
  const scroller = new LocomotiveScroll({
    el: document.querySelector('.container'),
    smooth: true,
    lerp: 0.1,
    smartphone: {
      smooth: false,
      direction: "vertical",
    },
    tablet: {
      smooth: false,
      direction: "vertical",
    },
  });
} else {
  const scrollbar = window.Scrollbar;
  scrollbar.use(OverscrollPlugin);
  
  scrollbar.init(document.getElementById("my-scrollbar"), {
    damping: 0.11,
    renderByPixels: !('ontouchstart' in document),
    plugins: {
      overscroll: {
        enable: true,
        effect: "bounce",
        damping: 0.11,
        maxOverscroll: 50,
      },
    },
  });
}

22.11.10 +)

1. 처음 로딩됐을 때의 너비값을 기준으로 함수가 실행되며 그 이후로는 위 if문이 작동하지 않는다 (resize도 안됨)

2. locomotive scroll의 옵션 중 smartphone, tablet은 기기를 타기 때문에 pc에서는 적용되지 않음! (개발자도구는 됨)

3. 각각의 함수에 destroy();도 적용해봤으나 리셋되지 않음

 

6. 참고 페이지

https://ifhead.tistory.com/entry/Web-%EB%B6%80%EB%93%9C%EB%9F%AC%EC%9A%B4-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B5%AC%ED%98%84-%EB%AA%A8%EB%A9%98%ED%85%80-%EC%8A%A4%ED%81%AC%EB%A1%A4#3.%20NPM%EC%9C%BC%EB%A1%9C%20Smooth%20Scrollbar%EB%A5%BC%20%EC%A4%80%EB%B9%84

 

[Web] 부드러운 페이지 스크롤 구현 (모멘텀 스크롤)

데모 페이지 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:

ifhead.tistory.com

https://codepen.io/ilyasbilgihan/pen/pogNmPz

 

smooth-scrollbar (with official overscroll plugin)

A simple usage of smooth-scrollbar module without using npm. Go https://github.com/idiotWu/smooth-scrollbar to use it better....

codepen.io

 

'javaScript' 카테고리의 다른 글

오늘 날짜 출력하기  (0) 2022.11.14
locomotive-scroll)스크롤 부드럽게 하기  (0) 2022.11.08
tab 클릭 시 css 변경  (0) 2022.10.24
JS로 별모양 찍기 (for문)  (0) 2022.08.25
div로 progress bar 만들기 (scroll indicator)  (0) 2022.08.02

관련글

티스토리툴바