designScroll.js

플러그인 사용을 위해선 도메인을 등록해야 합니다.
플러그인을 설치할 사이트의 도메인을 등록 후 사용법에 따라 이용해 주세요.

designScroll.js

스크롤바를 디자인할 수 있는 플러그인

사용법

<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>

 

 

 

 

 

 

설치방법

 

1. Line55 : 제이쿼리를 연결합니다.

 

2. Line56 : 플러그인 사용하기 후 도메인을 등록 합니다. 코드를 복사 그리고 붙여넣기 합니다.

 

3. Line13 ~ 52 : 스타일을 복사 그리고 붙여넣기 합니다. 웹 사이트에 맞게 수정 합니다.

 

4. Line59 : 스크립트를 복사 그리고 붙여넣기 합니다.

 

 

 
 
 
 
 
Install

1. Line 55: Connect the jquery.

 

2. Line56: Register the domain after using the plug-in. Copy and paste code.

 

3. Line13 ~ 52: Copy and paste the style. Modify it to fit your website.

 

4. Line59: Copy and paste the script.