如何制作自定义滚动条 jQuery 插件

Question

我正在考虑制作自定义滚动条 jQuery 插件，有很多可用的插件，但我想自己制作，问题是我没有得到如何通过移动其他 div 元素（滚动条）来移动内容的概念) 以及我应该如何使用鼠标滚轮来移动内容？？

请帮助我理解这一点。

谢谢

Answer 1

最简单的概念是使用可拖动的 jQuery UI 并将.draggable() 方法附加到.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>

以上只是涉及所需逻辑和数学的示例，
它错过了“隐藏滚动条”，只是为了保持简单。我会留给你添加所有需要的调整，插件。

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

Javascript：-

  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 });
});