디자인스크롤바

- html

- css

/* 디자인스크롤바 */
						.js-scrollbar {
							overflow-x:hidden;
							overflow-y:auto;
							position:relative;
							max-height:240px;
							padding:20px;
							border:1px solid #ddd;
						}

.js-scrollbarInner {
							overflow-x:hidden;
							overflow-y:scroll;
							box-sizing:border-box;
							-ms-overflow-style:none;/* IE and Edge */
							scrollbar-width:none;
						}
						.js-scrollbarInner::-webkit-scrollbar {display:none;}

.js-scrollbar .jsScroll,
						.js-scrollbar .copyScroll {
							position:absolute;
							top:0;
							right:0;
							bottom:0;
							width:17px;
							z-index:10;
						}

.js-scrollbar .jsScroll .bar {
							position:absolute;
							top:0;
							left:50%;
							transform:translateX(-50%);
							width:4px;
							padding:0;
							border:0;
							background-color:transparent;
						}
						.js-scrollbar .jsScroll .bar:before {
							content:'';
							position:absolute;
							top:8px;
							right:0;
							bottom:8px;
							left:0;
							background-color:#c4c4c4;
						}
						.js-scrollbar .copyScroll {
							overflow-x:hidden;
							overflow-y:auto;
							opacity:0;
						}
						.js-scrollbar .copyScroll div {width:17px;}

- script

$(window).on('load', function(){
							jsScrollBar();//디자인스크롤바
						});

$(window).resize(function(){
							jsScrollBar();//디자인스크롤바
						});

/*
							* 스크롤 박스(디자인)

jsScrollBar();
							jsScrollBar('class명');
							jsScrollBar('class명', function(){
								콜백영역
							});
						*/
						function jsScrollBar(el, callback){
							if(el){
								var $el = $('.' + el);
							}else{
								var $el = $('.js-scrollbar');
							}

$el.each(function(){
								$(this).css('overflow', 'inherit').addClass('js-scrollbar');

$(this).find('.jsScrollBarInner').removeAttr('tabindex');

var html = $(this).html();
								var maxHei = $(this).outerHeight();

//패딩값
								var pdT = parseInt($(this).css('padding-top'));
								var pdR = parseInt($(this).css('padding-right'));
								var pdB = parseInt($(this).css('padding-bottom'));
								var pdL = parseInt($(this).css('padding-left'));
								if(pdT == 0){var pdTop = 0;}else{var pdTop = pdT;}
								if(pdR == 0){var pdRt = 0;}else{var pdRt = pdR;}
								if(pdB == 0){var pdBtm = 0;}else{var pdBtm = pdB;}
								if(pdL == 0){var pdLft = 0;}else{var pdLft = pdL;}

if($(this).find('.js-scrollbarInner').length == 0){
									$(this).html('<div class="js-scrollbarInner" tabindex="0"><div class="paddingBox">' + html + '</div></div>');
								}

$(this).find('.js-scrollbarInner').css({
									'max-height':maxHei + 'px',
									'margin-top':-pdTop,
									'margin-right':-pdRt,
									'margin-bottom':-pdBtm,
									'margin-left':-pdLft
								});

$(this).find('.js-scrollbarInner .paddingBox').css({
									'padding-top':pdTop,
									'padding-right':pdRt,
									'padding-bottom':pdBtm,
									'padding-left':pdLft
								});

//스크롤바 생성
								var hei = $(this).outerHeight();
								var sHei = $(this).find('.js-scrollbarInner').prop('scrollHeight');
								var barHei =(hei / sHei) * 100;

if($(this).find('.jsScroll').length == 0){
									if(hei >= sHei){
										$(this).find('.jsScrollBarInner').removeAttr('tabindex');
									}else{
										$(this).append('<div class="jsScroll"><button type="button" class="bar" tabindex="-1"></button></div>');
										$(this).append('<div class="copyScroll"><div></div></div>');
									}
								}

$(this).find('.jsScroll .bar').css('height', barHei + '%');
								$(this).find('.copyScroll').css('height', hei).find('div').css('height', sHei);

if(hei >= sHei){
									$(this).find('.jsScroll, copyScroll').hide();
								}else{
									$(this).find('.jsScroll, copyScroll').show();
								}

/* scroll */
								$(this).find('.js-scrollbarInner').scroll(function(){
									var sTop = $(this).scrollTop();
									if(sTop == 0){
										var barTop = 0;
									}else{
										var barTop = (sTop / sHei) * 100;
									}

$(this).closest('.js-scrollbar').find('.jsScroll .bar').css({'top':barTop + '%'});
								});
							});

//콜백영역
							if(callback){
								callback(true);
							}

$(document).off('mouseenter', '.js-scrollbar .copyScroll');
							$(document).on('mouseenter', '.js-scrollbar .copyScroll', function(){
								var sTop = $(this).closest('.js-scrollbar').find('.js-scrollbarInner').scrollTop();

$(this).scrollTop(sTop);
							});

$('.js-scrollbar .copyScroll').scroll(function(){
								var sTop = $(this).scrollTop();

$(this).closest('.js-scrollbar').find('.js-scrollbarInner').scrollTop(sTop);
							});
						}

디자인스크롤바

예제

사용방법

- html

- css

- script