스크롤바에 디자인 하기 워크식스 제이쿼리 플러그인 - designScroll.js

designScroll.js

 

 

 

스크롤바는 태그 처럼 스타일을 적용할 수 없어서 비슷하게 자바스크립트를 통해서 만들어야 합니다.

 

 

워크식스의 designScroll.js는 빠른 시간 안에 디자인 된 스크롤바를 만들어 줍니다.

 

 

사용법은 아주 간단 합니다. 

몇 줄의 css를 추가하고 자바스크립트 한줄을 추가해주면 바로 사용이 가능 합니다.

 

 

<style>
p{
    position: absolute;
    top:50%;
    left:50%;
    border:1px solid red;
    width:300px;
    height:300px;
    transform: translate(-50%,-50%);
    padding:20px;
}
 
/* designScroll */
.designScroll{
    position: relative;
    overflow: hidden;
}
.designScroll *{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.designScroll .container{
    position: relative;
    height:100%;
}
.designScroll .container .contents{
    position: absolute;
    top:0;
    left:0;
    width:calc(100% + 14px);
    overflow-y: scroll;
    height: 100%;
}
.designScroll .container .scroll{
    position: absolute;
    top:0;
    right:0;
    width:6px;
    height:100%;
    background: #f9f9f9;
}
.designScroll .container .scroll .bar{
    position: absolute;
    top:0px;
    right:1px;
    background: gray;
    width:4px;
    height:40px;
    border-radius: 4px;
    cursor: pointer;
}
</style>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//work6.kr/plugin/plugin_link/47"></script>
<script>
$(function(){
    $('.designScroll').designScroll();
});
 
</script>
 
<p class="designScroll">
    이용약관
        1. 동해물과 백두산이
        ......
</p>

 

자세한 메뉴얼 및 영상은 워크식스 홈페이지에서 만나보실 수 있습니다.

 

 

 

copyright 2019. 워크식스