javascript - 当鼠标快速移动时，在 JQUERY 中自定义拖动 div 无法正常工作

Question

我正在尝试设计一个自定义滚动条，只有当鼠标移动缓慢时我才能做到这一点，如果鼠标移动很快，“条”就会离开滚动区域。这是我的 fiddle : http://jsfiddle.net/ghufranne/ydz2hpm0/22/

        var $body = $('body');
        var $target = null;
        var isDraggEnabled = false;

        var posY=0;
        $body.on("mousedown", "#bar", function(e) {

            $this = $(this);

    if(e.offsetX==undefined){

                    y = e.pageY-$(this).offset().top;
                }else{

                    y = e.offsetY;
                };

            $('#scrollRegion').offset({
                top:currTop+y});    
            $target = $(e.target);
           e.preventDefault();

        });

         $body.on("mouseup", function(e) {
            $target = null;
         });
        var bottomScrollLock=false;
        var topScrollLock=false;
     $body.find("#scroll").on("mousemove", function(e) {
            if ($target) {
              var pos= $target.offset(); 

         if(bottomScrollLock && e.pageY<posY){

                    bottomScrollLock=false;

                }

           if(topScrollLock && e.pageY>posY){

                    topScrollLock=false;

                }

         if(pos.top<scrollPos.top )
         {
             posY=e.pageY;
             topScrollLock=true;


         }
         if((pos.top+heightOfBar-scrollHeight)> scrollPos.top){
             posY=e.pageY;
             bottomScrollLock=true;

         }       

    noOfElToScroll = parseInt(pos.top-e.pageY+y);

                  $("#drag").text(noOfElToScroll);
 if(!bottomScrollLock && noOfElToScroll<0 ){

                $target.offset({
                    top: e.pageY -y
                });
     for(var i=0;i<1;i++){
$drop.find('li:last').after("<li>value "+(lastVisible++)+"</li>");   
      $drop.find('li:first').remove();
         firstVisible++;}
                }
   if(noOfElToScroll>0 &&!topScrollLock){

                $target.offset({
                    top: e.pageY -y
                });
    $("#drag").text($('#bar').offset().top);
  $drop.find('li:first').before("<li>value "+(firstVisible--)+"</li>");   
     $drop('li:last').remove();
     lastVisible--;
                }  

            };     
         });

如果我使用 Draggable 工作，它会工作得很好。但是我不想用，我想学。

Answer 1

看first和 second chart .该因素称为 Jquery