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

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

请帮我理解这个。

谢谢

Answer 1

最简单的概念是使用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; } 

   
 
 
 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. 
  

Answer 2

在没有jQuery-UI的情况下制作自定义滚动条。

HTML： –

  
 
 
 
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.
 
  

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