실제적용 미리보기 : https://www.artistudy.com (좌측 메뉴)

 

https://github.com/malihu/malihu-custom-scrollbar-plugin 이 소스를 활용합니다.

 

소스를 로드합니다.

 

<load target="css/jquery.mCustomScrollbar.css" />
<load target="js/jquery.mCustomScrollbar.js" />

 

적용할 곳 (레이아웃,위젯 등..)에 스크립트를 작성해서 넣어줍니다.

<script>
    (function($){
        $(window).on("load",function(){
            $(".side_wrapper").mCustomScrollbar();
        });
    })(jQuery);
</script>

여기 적은 .side_wrapper가 커스텀 스크롤바를 적용할 개체입니다.

 

<div class="side_wrapper" data-mcs-theme="light-thick">

적용할 개체에 data-mcs-theme="light-thick" 처럼 테마를 지정해주면 해당 테마가 적용됩니다.

 

테마 종류는 아래 데모링크에서 확인하시면 됩니다.

http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html

  • profile
    예전에 봐뒀다가 까먹었던 라이브러리인데 덕분에 좋은 참고가 될 것 같습니다~
    링크 파싱 애드온에서 iframe 스크롤 처리 할 일이 있거든요. 감사합니다~~
  • profile profile
    요약이 길어지는 경우인가요? :)
  • profile profile
    그건 아니구요. 트위터를 임베드해주는 경우가 있는데 트윗이 이게 20개 가까이 출력이 되다보니 세로 스크롤이 발생해서 스크롤바를 css로 처리할지 아니면 커스텀스크롤바 라이브러리를 적용할지 고민 중이에요^^
  • profile profile
    css처리는 IE에서 적용되지 않아서,
    크로스 브라우징을 생각하면 아마 이 라이브러리를 쓰셔야 할 듯 합니다 :)
  • profile profile

    엇, 제가 알기론 (제한적이나마) IE에서도 css는 되는 걸로 알고 있어요.

    http://minineko.tistory.com/entry/CSS-scrollbar-IE-Chrome-Safari-스크롤바-익스-크롬-사파리
    다만, 브라우저별로 스타일 문법을 다 다르게 적용해야 하는 게 관건이어서;;

  • profile profile
    IE는 스크롤바 태생적 한계가 있습니다.
    모양이 바뀌진 않고 그냥 스크롤바에 색상변경만 가능합니다..
  • profile profile
    그렇더라구요. 역시 커스텀스크롤바로 가야겠군요~! ^v^/