커스텀 스크롤바 jQuery 플러그인 작성법

Question

커스텀 스크롤 바 jQuery 플러그인을 만들려고 생각했지만, 많은 플러그인을 사용할 수 있지만 스스로 만들고 싶습니다. 문제는 컨셉을 어떻게 바꾸어야하는지입니다. 다른 div 요소 (스크롤 막대)를 이동하고 또한 어떻게 마우스 스크롤러를 사용하여 콘텐츠를 이동해야합니까 ??

이해해주세요.

감사

Answer 1

가장 쉬운 개념은 jQuery를 UI 드래그 사용 및 위의 .scrollbar

var $scrollable = $(".scrollable"), 
 
    $scrollbar = $(".scrollbar"), 
 
    height  = $scrollable.outerHeight(true), // visible height 
 
    scrollHeight = $scrollable.prop("scrollHeight"), // total height 
 
    barHeight = height * height/scrollHeight; // Scrollbar height! 
 

 
// Scrollbar drag: 
 
$scrollbar.height(barHeight).draggable({ 
 
    axis : "y", 
 
    containment : "parent", 
 
    drag: function(e, ui) { 
 
    $scrollable.scrollTop(scrollHeight/height * ui.position.top ); 
 
    } 
 
}); 
 

 
// Element scroll: 
 
$scrollable.on("scroll", function() { 
 
    $scrollbar.css({top: $scrollable.scrollTop()/height * barHeight }); 
 
});

.parent{ 
 
    position:relative; 
 
    overflow:hidden; 
 
    height:200px; 
 
    width:180px; 
 
    background:#ddd; 
 
} 
 
.scrollable{ 
 
    overflow-y:scroll; 
 
    position:absolute; 
 
    padding:0 17px 0 0; 
 
    width: 180px; 
 
    height:100%; 
 
} 
 
.scrollbar{ 
 
    cursor:n-resize; 
 
    position:absolute; 
 
    overflow:auto; 
 
    top:0px; 
 
    right:0px; 
 
    z-index:2; 
 
    background:#444; 
 
    width:17px; 
 
    border-radius:8px; 
 
}

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script> 
 

 
<div class="parent"> 
 
    <div class="scrollbar"></div> 
 
    <div class="scrollable"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur. 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur. 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur. 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur.  
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur. 
 
    </div> 
 
</div>

에 .draggable() 방법을 첨부하는 것이 필요 그냥 예입니다 논리와 수학이 관련된,
간단하게 유지하기 위해 "숨기기 스크롤바"가 누락됩니다. 필요한 모든 조작, 애드온을 추가하겠습니다.

Answer 2

jQuery-UI가없는 사용자 정의 스크롤바 을으로 만드십시오.

HTML : -

<div class="parent"> 
      <div class="scrollbar"></div> 
      <div class="scrollable"> 
       <p>Lorem ipsum dolor sit amet, 
       consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. 
       Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur.</p> 
      </div> 
    </div> 

CSS : -

.parent{ 
    position:relative; 
     margin:50px; 
     overflow:hidden; 
    height:200px; 
    width:180px; 
    background:#ddd; 
} 
.scrollable{ 
     overflow-y:scroll; 
    position:absolute; 
     padding:0 17px 0 0; 
    width: 180px; 
     height:100%; 
} 
.scrollbar{ 

    position:absolute; 
    overflow:auto; 
    top:0px; 
    right:0px; 
    z-index:2; 
    background:#444; 
    width:7px; 
    border-radius:5px; 
} 

자바 스크립트 : - 나는 가능한 플러그인을 시도하지 않았다

var $scrollable = $('.scrollable'); 
    var $scrollbar = $('.scrollbar'); 
    $scrollable.outerHeight(true); 
    var H = $scrollable.outerHeight(true); 
    var sH = $scrollable[0].scrollHeight; 
    var sbH = H*H/sH; 



$('.scrollbar').height(sbH); 

$scrollable.on("scroll", function(){ 

    $scrollbar.css({top: $scrollable.scrollTop()/H*sbH }); 
});