IE에도 적용되는 커스텀 스크롤바 사용하기.
실제적용 미리보기 : https://www.artistudy.com (좌측 메뉴)
https://github.com/malihu/malihu-custom-scrollbar-plugin 이 소스를 활용합니다.
소스를 로드합니다.
<load target="css/jquery.mCustomScrollbar.css" />
<load target="js/jquery.mCustomScrollbar.js" />
<load target="js/jquery.mCustomScrollbar.js" />
적용할 곳 (레이아웃,위젯 등..)에 스크립트를 작성해서 넣어줍니다.
<script>
(function($){
$(window).on("load",function(){
$(".side_wrapper").mCustomScrollbar();
});
})(jQuery);
</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
빈엔터테인먼트
Lv. 4
댓글 7
링크 파싱 애드온에서 iframe 스크롤 처리 할 일이 있거든요. 감사합니다~~
크로스 브라우징을 생각하면 아마 이 라이브러리를 쓰셔야 할 듯 합니다 :)
엇, 제가 알기론 (제한적이나마) IE에서도 css는 되는 걸로 알고 있어요.
http://minineko.tistory.com/entry/CSS-scrollbar-IE-Chrome-Safari-스크롤바-익스-크롬-사파리
다만, 브라우저별로 스타일 문법을 다 다르게 적용해야 하는 게 관건이어서;;
모양이 바뀌진 않고 그냥 스크롤바에 색상변경만 가능합니다..