2023-01-26

image-20230127105248115

jQuery-slim-Scroll은 div의 부모로 ‘slimScrollDiv’를 생성한뒤 내부 스크롤을 제공하는 jQuery 플러그인이다.

1.사용전 다운로드

  1. jquery.slimscroll.js 또는 jquery.slimscroll.min.js 다운로드
    (https://github.com/rochal/jQuery-slimScroll) 

  2. jquery.slimscroll 플러그인 버젼에 맞는 jquery-1.9.0.js 다운로드
    (https://code.jquery.com/jquery-1.9.0.js)

2.사용방법

JS 추가

<script src="js/jquery-1.9.0.js"></script>
<script>
    $j190 = jQuery.noConflict(); 
</script>
<!-- <script src="js/jquery-3.1.1.js"></script> -->
<script src="js/jquery.slimscroll.js"></script>

$j190 = jQuery.noConflict(); 를 통해 다른 라이브러리, 다른 버젼의 jQuery와 충돌 방지를 할수 있다.

DIV 추가

<div class="slimscroll">
    트고, 심장은 피가 소금이라 안고, 찾아다녀도, 곳이 칼이다. 천하를 많이
    바이며, 피어나는 것이다. 작고 심장의 품에 이것이다. 만물은 얼마나 열락의
    거선의 대고, 얼마나 가는 커다란 것이다. 구할 꽃 있는 때까지 있으며,
    천자만홍이 인간의 얼마나 새가 철환하였는가? 온갖 있는 청춘 눈에 이상이
    보이는 뼈 천자만홍이 것이다. 같이, 물방아 그들은 봄바람이다. 피가 불어
    보내는 영락과 것은 되려니와, 것이다. 무엇을 고동을 끓는 있으며, 커다란
    용기가 이성은 청춘 끝에 있으랴? 귀는 충분히 인생의 구하지 작고 피고,
    있는가? 인간의 뜨고, 생생하며, 속에 품에 소리다.이것은 싸인 철환하였는가?
    곧 있을 인생을 품으며, 있다. 피고 천지는 목숨을 뜨고, 착목한는 위하여
    무엇을 끓는다. 바이며, 피부가 아니한 광야에서 따뜻한 지혜는 피어나는
    이것을 아니다. 많이 피가 우리 아니더면, 실현에 용기가 있으랴? 귀는 주는
    낙원을 열락의 군영과 가슴이 풍부하게 피가 보라. 산야에 이것은 바로 힘차게
    위하여서 할지니, 피고 것이다. 청춘의 불어 있음으로써 뼈 아니다. 많이 끝에
    그들은 인생을 수 봄바람을 얼음에 그리하였는가? 있는 같으며, 어디 굳세게
    불러 보이는 얼음이 아니다. 날카로우나 수 소담스러운 무엇을 영락과 이것은
    쓸쓸한 든 사막이다. 투명하되 찬미를 이상 같은 두손을 위하여서. 인생을 앞이
    남는 피는 그들의 인생에 아니다. 같으며, 긴지라 위하여 같지 더운지라
    것이다. 피가 그와 힘차게 사람은 피어나기 청춘 할지니, 석가는 남는 있는가?
    그들은 얼마나 봄날의 넣는 희망의 때문이다. 못할 돋고, 못할 찾아다녀도,
    꾸며 싶이 인도하겠다는 크고 것이다. 작고 길을 그와 우리는 황금시대다.
    위하여 찬미를 천하를 동산에는 황금시대다. 두기 같지 꾸며 목숨이 있다. 어디
    봄날의 가치를 같으며, 것이다. 있을 열매를 안고, 방황하였으며, 사랑의 하는
    이것이다. 설레는 싸인 싶이 위하여 내는 구할 이것을 든 온갖 위하여서.
</div>

SCRIPT 추가

/** 기본 **/
<script>
    $j190(".slimscroll").slimScroll();
</script>

/** div속성 **/
<script>
    $j190(".slimscroll")
      .slimScroll({
        height: "400px",
        width: "300px",
      })
      .parent() /**  **/
      .css({
        background: "#237FAD",
        border: "2px dashed #184055",
        padding: "0px 10px",
      });
</script>

script는 <body> 상단에 선언하는 것이 아닌 <body> 하단에 있어야한다.
스크롤 생성할 div의 width와 height를 조절할수 있다.
.parent().css()를 통해 slimscroll 부모인 slimScrollDiv의 CSS 속성을 변경할 수 있다.

댓글남기기

참고