如何使自定义滚动条jQuery插件

我正在考虑制作自定义滚动条jQuery插件,有很多插件可用,但我想自己制作,问题是我没有得到这样的概念,我应该如何移动其他div元素(滚动条)和如何使用鼠标滚轮移动内容？

请帮我理解这一点.

谢谢

解决方法

最简单的概念是使用jQuery UI draggable并将.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.
  </div>
</div>

以上只是一个需要逻辑和数学的例子,它错过了“隐藏滚动条”,只是为了保持简单.我会给你添加所有需要的调整,插件.

原文地址：https://www.jb51.cc/jquery/179864.html