ART of WEB

"엑수시아"

커스텀 스크롤바를 만들어주는 훌륭한 js 플러그인

[2015-08-30 블로그 이전 안내]

안녕하세요. 서토리(구 필명 엑수시아)입니다. 전문적인 개발 블로그로 다시 태어나기 위해 부득이하게 블로그를 이전하게 되었습니다. 앞으로는 아래의 주소로 접속 부탁드립니다. 감사합니다.

서토리 블로그 바로가기

오늘 소개해주고 싶은 js 플러그인은 커스텀 스크롤바를 만들어 주는 'mCustomScrollbar' 이라는 플러그인입니다. 먼저 알려드리자면 제 블로그의 히든영역에 적용되어 있는 스크롤바 입니다.


<현재 제 블로그에 이렇게 적용되어 있습니다.>


딱 보셔도 일반 스크롤바와는 많이 틀리시다는 것을 알 수 있습니다. 이 스크롤바는 브라우져가 기본적으로 제공해주는 것을 사용하지 않습니다. 


js를 뜯어서 대충 둘러보셔도 작동원리에 대한 감은 오는데, 일단 이 커스텀 스크롤바의 작동원리는 이렇습니다. 스크롤바가 생성되는 div의 높이 값을 계산해서 top 의 위치를 조절해 줌으로써 마치 스크롤바와 같은 효과를 얻습니다. 


'mCustomScrollbar' 플러그인은 스크립트로 짜여져 있는 커스텀 스크롤바이기 때문에 여러가지 장점이 존재합니다. 일단은 버튼으로 스크립트 펑션을 호출해서 위치조작이 가능하고, 오토 스크롤링이 가능합니다. 물론 스크롤바의 형태나 모양 역시 변경이 가능하며, 제이쿼리 기반이기 때문에 스크롤 바에 액션이 생겼을 때에 콜백 함수를 받아서 처리하는것 역시 가능합니다.


<mCustomScrollbar 배포 사이트 화면>



<스크롤바 데모 페이지>



개인적으로 강력 추천하는 js 플러그인이며, 호환은 익스 7 버젼부터 사용이 가능합니다. 사용 방법은 사이트에 충분한 예제와 설명으로 잘 나와 있습니다. ^.^ 그럼 즐거운 프로그래밍되시길 바랍니다. ^..^

태그목록> , , , , , , , ,

COMMENT

비밀글 Add Comment
  1. BlogIcon 파크야 ㆍ2013.12.05 15:00 신고ReplyEdit

    제이쿼리는 정말 훌륭한것 같습니다 :)

  2. BlogIcon Estoque ㆍ2013.12.05 16:05 신고ReplyEdit

    제이쿼리로 스크롤바를 만들면 크로스 브라우징은 고려 하지 않아도 되겠내요 ㅎㅎ

    웹킷, 블링크 계열따로, IE따로, 스크롤바 CSS가 있던데... 파이어 폭스는 아예 가능한지 여부조차 모르겠고요... ㅋㅋㅋ

    • BlogIcon 엑수시아 ㆍ2013.12.06 16:20 신고Edit

      최대장점은 아무래도 그런점이 있지요 ㅎㅎ 그리고 스크롤바가 예쁘다는 장점정도? ㅎㅎ

  3. ㆍ2014.03.01 10:39ㆍReplyEdit

    비밀댓글입니다

    • BlogIcon 엑수시아 ㆍ2014.03.01 23:25 신고Edit

      먹통이 되는 현상이면 아무래도 제이쿼리 충돌 현상이나 파일이 덜 올라갔거나 그런 이유로 보이는데 잠깐 소스를 보니 Customscrollbar.css 파일이 없는것 같습니다. ^^

      1.7대 버젼이여서 실행이 잘 안되는건지는 모르겠지만, 특별한 문제가 없다면 그냥 1.9대 버젼으로 업그래이드를 하시면 될꺼 같아요. ㅎㅎ

      그리고 하단에 자바스크립트를 삽입시
      (function($){
      $(window).load(function(){
      });
      })(jQuery);
      이 두줄은 안써주셔도 됩니다. ^^ 왜냐하면 브라우져에서 이미 돔을 다 읽어 들였기 때문입니다.
      (위에서 선언할 경우는 필수입니다. 돔을 읽어 들여야 로드가 가능해지기 때문입니다. ^^)

    • BlogIcon VJ HerO ㆍ2014.03.02 00:07 신고Edit

      말씀하신대로 CSS 넣고 수정해 보았는데 작동이 안되는것 같습니다. 저하곤 궁합이 안맞나 봐요;^^ 좋은 정보 감사합니다.

    • BlogIcon 엑수시아 ㆍ2014.03.03 11:01 신고Edit

      허헛.. 그랬군요..^^;; 바로 블로그에 심는게 아니라, 간단한 html에서 적용시켜보고 블로그로 옮기는 방법도 하나의 방법이 될 수도 있습니다. ^^;;

  4. ㆍ2015.09.29 11:16 신고ReplyEdit

    찾던건데 감사합니다.ㅎㅎ

< 1 2 3 4 5 ··· 52 >