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