Javascript 使用Jquery的不稳定滚动条

这是小提琴

我的意图是在一条颜色上构建一个滚动条。颜色取自它应该滚动的文本。基本上，条带是文本字体中使用的所有颜色的概述。文本是动态生成的，可以非常大，也可以非常小。我的目的是使滚动条的大小成比例，同时正确滚动。我使用jquery尝试了各种组合，但我似乎无法让滚动条按我想要的方式工作。有时，滚动条似乎没有指向正确的文本段落。如何解决这个问题

jquery代码如下所示：

///  here is our plugin declaration
(function ( $ ) {



    $.fn.colorScroller = function( options ) {

        var settings = $.extend({
            replaceBlack: 'rgb(83, 84, 72)',
            colorScrollClass: "color-map",
            overlayClass: "overlay",
            scrollSectionClass: "mapSection",
            coloredTextClass: "passage"
        }, options );


      // assign this(the selector that is calling this function) to container
      var container = this;
      // getting the height of container
      var containerHeight = container.outerHeight(true);
      // creating overlay scrolling element
      var $overlay = $('<div class="'+settings.overlayClass+'" ></div>')
      //creating container for colored parts
      var $colorScroll=$('<div class="'+settings.colorScrollClass+'" ></div>')
      // appending colormap element after container in DOM
      container.after($colorScroll);
      // approximate total height of browser vertical scroll buttons
      var browserScrollButtons = 26;
      // setting height of colorscroll element to the height of container
      $colorScroll.outerHeight(container.outerHeight()-browserScrollButtons );

      var scrollerHandleMin = 31



      // here we are calculating the total height of text elements of container
      var totalHeight = 0;
      container.children('.'+ settings.coloredTextClass).each(function(){
        totalHeight = totalHeight + $(this).outerHeight(true);
      });

      // calculate height of  text empty elements like br or <p></p>
      var emptyHeight = 0;
      container.children().not('.'+ settings.coloredTextClass).each(function(){
        emptyHeight = emptyHeight + $(this).outerHeight(true);
      });


      // here we are calculating the ratio b/n total height of children of container and the height of color-scroll element   
      var ratio = totalHeight/$colorScroll.outerHeight();
      // here we create a jquery object containing of small divs which will be colored, and associated with each passage div in container
      var $mini = $('.'+settings.coloredTextClass, container).map(function(){ 
        // getting the height of passage, setting the height of small div element by dividing by ratio
        var heightPassage=$(this).outerHeight(true)/ratio+'px';
        // getting the color of passage
        var colorPassage=$(this).css('color');
        // color change if color is black
        if (colorPassage=='rgb(0, 0, 0)')
          colorPassage = settings.replaceBlack;

        var elem = $('<div class="'+settings.scrollSectionClass+'" style="height:'+heightPassage+'; background-color:'+colorPassage+'" ></div>').get(0)
        // returning a jquery object element with class, height and color associated according to previous calculations
        return  elem
      });

      // get approximate height of browser scroll bar  handle
      var browserScrollBarHeight = (containerHeight*(containerHeight-browserScrollButtons ))/(totalHeight + emptyHeight ) 
      browserScrollBarHeight = browserScrollBarHeight >  scrollerHandleMin ? browserScrollBarHeight : scrollerHandleMin

      // set overlay scroller height to browser scroll handle height
      $overlay.outerHeight(browserScrollBarHeight);
      var overlayHeight = $overlay.outerHeight();

      // appending the minified elements into colorscroll element 
      $($mini).appendTo($colorScroll);

      // appending overlay element into color-scroll element
      $colorScroll.append($overlay);

      // getting top position of container related to document top
      var colorScrollTop = $colorScroll.offset().top+1+parseInt($colorScroll.css('margin-top').replace('px', ''))

      // getting multiple to create algorithm for converting top positions
      var k = (totalHeight + emptyHeight - containerHeight)/($colorScroll.innerHeight()-overlayHeight)


      // attaching draggable to overlay scrolling element, so that it can be moved along color scroll element
      $overlay.draggable({ 
        // constrain movement to color-scroll element only
        containment: "."+settings.colorScrollClass,

        // what to do when overlay is dragged
        drag: function() {
          // getting top position of overlay related to document top
          var top = $(this).offset().top;
          container.animate({
            // scroll container vertically to the point of overlay top (related to color-scroll element ) associated with text in container
            scrollTop: (top-colorScrollTop)*k +'px'
          }, 2)
        },


      });


      /// when mouse on color-scroller unbind container scroll and enble draggable
      /// when mouse leaves color-scroller bind container scroll and disable draggable
        $colorScroll
          .mouseenter(function() {
            $overlay.draggable('enable')
            container.off('scroll',  scrollText) 
          })
          .mouseleave(function() {
            $overlay.draggable('disable')
            container.on('scroll',  scrollText) 
          });


      // function triggered when container scrolled, basically scroll the overlay 
      function  scrollText(){
              $overlay.animate({
                top: container.scrollTop()/k + 'px'
              }, 1)
       }
      container.on('scroll',  scrollText)    

      // when the color-scroll element is clicked
      $colorScroll.on('click',function(e){
        // calculate the position of click related to color-scroll itself
        var topPosition = e.pageY-$(this).offset().top;
        // and move overlay top to that position  
        $overlay.animate({
          top: topPosition+'px'
        }, 200)
        // and scroll container to text associated with overlay top
        container.animate({
          scrollTop: (topPosition+overlayHeight)*ratio-containerHeight+'px'
        }, 10)
      })



      return container;

    };

}( jQuery ));

///  end plugin 

$(document).ready(function() {
  var passes = [0, 1, 2, 3, 4, 5, 6]

  for (var i in passes) {
    col = document.getElementById('pass' + i).style.color;
    var element = document.createElement("section");
    element.style.background = col;

    document.getElementById("left").appendChild(element);
  }
  canvas = document.createElement("canvas");
  canvas.id = 'canvas';
  canvas.style = 'height:700px;width:50px;';

///   here we init plugin function
  $('#document_content').colorScroller({replaceBlack: 'rgb(0,0,0)'});
   /// the other option with defaults are : 
//         colorScrollClass: "color-map", css class of colored scrollbar
//         overlayClass: "overlay",       css class of the custom scrollbar
//         scrollSectionClass: "mapSection",  css class of the small colored sections in colored scroll bar
//         coloredTextClass: "passage"     css class of the original text part
/// 

});

///这是我们的插件声明
（函数（$）{
$.fn.colorScroller=函数（选项）{
变量设置=$.extend({
替换黑色：“rgb（83,84,72）”，
colorScrollClass:“颜色映射”，
覆盖类：“覆盖”，
ScrollSection类：“mapSection”，
彩色文本类：“段落”
}，选项）；
//将此（调用此函数的选择器）分配给容器
var容器=这个；
//获取容器的高度
var containerHeight=container.outerHeight（true）；
//创建覆盖滚动元素
变量$overlay=$（''）
//为彩色零件创建容器
变量$colorScroll=$（''）
//在DOM中的容器后追加colormap元素
容器。在（$colorScroll）之后；
//浏览器垂直滚动按钮的大致总高度
var browserScrollButtons=26；
//将colorscroll元素的高度设置为容器的高度
$colorScroll.outerHeight（container.outerHeight（）-browserScrollButtons）；
变量scrollerHandleMin=31
//这里我们计算容器中文本元素的总高度
var totalHeight=0；
container.children（'..+settings.coloredTextClass）.each（function（））{
totalHeight=totalHeight+$（此）.outerHeight（真）；
});
//计算文本空元素的高度，如br或

var-emptyHeight=0；
container.children（）{
emptyHeight=emptyHeight+$（this）.outerHeight（true）；
});
//这里我们计算的是b/n比率容器子元素的总高度和彩色滚动元素的高度
var ratio=totalHeight/$colorcoll.outerHeight（）；
//在这里，我们创建一个jquery对象，其中包含一组将被着色的小div，并与容器中的每个passage div关联
var$mini=$（'.+settings.coloredTextClass，container）.map（函数（）{
//获取通道高度，通过除以比率设置小div元素的高度
var heightPassage=$（此）.outerHeight（真）/比率+'px'；
//获取文章的颜色
var colorPassage=$（this.css（'color'）；
//如果颜色为黑色，则颜色会发生变化
如果（颜色通道=='rgb（0,0,0）'）
colorPassation=settings.replaceBlack；
var elem=$（''）.get（0）
//返回一个jquery对象元素，该元素的类、高度和颜色根据前面的计算关联
返回元素
});
//获取浏览器滚动条手柄的大致高度
变量browserScrollBarHeight=（containerHeight*（containerHeight browserScrollButtons））/（总高度+空高度）
browserScrollBarHeight=browserScrollBarHeight>scrollerHandleMin？browserScrollBarHeight:scrollerHandleMin
//将覆盖滚动条高度设置为浏览器滚动手柄高度
$overlay.outerHeight（浏览器滚动条高度）；
var overlayHeight=$overlay.outerHeight（）；
//将缩小的元素追加到colorscroll元素中
$（$mini）.appendTo（$colorScroll）；
//将覆盖元素追加到颜色滚动元素中
$colorcoll.append（$overlay）；
//获取与文档顶部相关的容器顶部位置
var colorScrollTop=$colorScroll.offset（）.top+1+parseInt（$colorScroll.css（'margin-top'）。replace（'px'，''）
//获取多个以创建转换顶级位置的算法
变量k=（总高度+空高度-容器高度）/（$colorScroll.innerHeight（）-overlayHeight）
//附加可拖动到覆盖滚动元素，以便它可以沿着颜色滚动元素移动
$overlay.draggable（{
//仅将移动约束到颜色滚动元素
包含：“.”+settings.colorScrollClass，
//拖动覆盖时的操作
拖动：函数（）{
//获取与文档顶部相关的覆盖的顶部位置
var top=$（this）.offset（）.top；
容器动画({
//将容器垂直滚动到与容器中的文本关联的重叠顶部（与颜色滚动元素相关）
scrollTop：（顶部颜色scrollTop）*k+'px'
}, 2)
},
});
///当鼠标位于颜色滚动条上时，取消绑定容器滚动条并启用拖动功能
///当鼠标离开彩色滚动条时，绑定容器滚动并禁用可拖动
$colorScroll
.mouseenter（函数（）{
$overlay.draggable（'enable'））
container.off（'scroll'，scrollText）
})
.mouseleave（函数（）{
$overlay.draggable（'disable'）
container.on（'scroll'，scrollText）
});
//函数在容器滚动时触发，基本上滚动覆盖
函数scrollText（）{
$overlay.animate({
top:container.scrollTop（）/k+'px'
}, 1)
}
container.on（'scroll'，scrollText）
//单击颜色滚动元素时
$colorScroll.on（'click'，函数（e）{
//计算与颜色滚动本身相关的单击位置
var topPosition=e.pageY-$（this）.offset（）.top；
//并将覆盖移动到