티스토리-square스킨 사이드바 마우스스크롤 속도 변경 방법::어나일언덕

지금 이 블로그에 적용되어 있는 스킨은 티스토리에서 제공해주는 기본 스킨 중에 반응형 스킨에 3번째 Square 1.3버전입니다.

심플하고 깔끔한 이미지가 마음에 들었습니다. 하지만 이대로 사용하기 보다는 자유 수정이 얼마든지 가능하다고 제작자도 밝혔으니 앞으로 여러가지를 변경하여 그 중에 다른 분들과도 공유해 볼만한 것은 팁으로 남기려고 합니다.

사이드바 마우스 스크롤 속도 조절

사이드바를 내리기 위해 마우스로 스크롤을 하면 약간은 답답함이 느껴질 정도로 잘 내려가지 않습니다. 이것을 고쳐보려고 하는데요. 코드 딱 한줄만 넣어주면 되는 의의로 쉬운 작업입니다.

우선 블로그 스킨을 변경하고 이것을 수정하려고 마음 먹었다면 어느 정도 블로그관리에 관한 경험은 있을테니 뭐 클릭하고 뭐 클릭하고 하는 장황한 설명은 생략하도록 하겠습니다.

블로그 관리 -> 꾸미기 -> HTML/CSS 편집 창을 엽니다.

HTML 편집 창에서

Ctrl + F 를 눌러 mCustomScrollbar를 검색하거나, 코드 거의 맨아래 부분으로 내려갑니다.

제 경우에는 아래 그림과 같이 437라인인데 기본 상태의 스킨이라면 보통은 400번대 초반에 있을 것입니다.

mCustomScrollbar는 jquery 사용자 정의 스크롤바로 쉽게 말해 다양한 옵션 코드를 적용하여 마우스 스크롤 관련 옵션 설정을 할 수 있습니다.

위의 그림과 같이 scrollInertia: 0 코드를 삽입해주고 저장을 눌러주면 일반적인 마우스 스크롤이 되는 것을 볼 수 있을 것입니다.

앞의 코드와 구분해주는 , 을 빠뜨리지 마시기 바랍니다.

scrollInertia: integer

Set the amount of scrolling momentum as animation duration in milliseconds.
Higher value equals greater scrolling momentum which translates to smoother/more progressive animation. Set to 0 to disable.

scrollInertia에 관한 설명입니다.

밀리세컨 정수값을 설정해줘서 스크롤 되는양을 조절해줄 수 있는데 값이 클수록 부드럽고 점진적으로 스크롤 됩니다. 0으로 설정하면 스크롤 효과가 없습니다. 약간의 느낌을 주고 싶다면 0이 아닌 100, 200 이런 식의 값을 넣어 마음에 드는 값으로 설정할 수 있습니다.

mouseWheel:{ scrollAmount: integer }

Set the mouse-wheel scrolling amount (in pixels). The default value "auto" adjusts scrolling amount according to scrollable content length.

추가로 이 코드는 한번에 마우스 휠로 스크롤 되는 양을 조절할 수 있습니다.

mouseWheel: {scrollAmount : 100} 이런식으로 설정할 수 있으며 카테고리가 많아서 스크롤을 많이 해야 할 경우에 설정해주면 좋습니다.

지금까지 내용에 대한 보다 자세한 내용은 http://manos.malihu.gr/jquery-custom-content-scroller/ 에서 확인해 볼 수 있습니다.