Javascript jScrollPane在元素拖动时滚动

我试图通过突出显示文本并向下拖动来滚动。现在，您可能已经知道，这是标准

overflow:auto

元素的标准默认行为，不过我尝试使用一些奇特的滚动条来实现它，这是由Kelvin Luck提供的jQuery jScrollPane提供的

我在这里创作了一把小提琴：

基本上，正如您所见，高亮显示和滚动在顶部框（默认的

溢出：auto

框）中起作用，但在第二个框中不起作用，更重要的是，当您到达底部时，它会反转您的选择

所以，我的问题是：有没有办法解决这个问题？如果是，怎么做

更新

我已经对此做了很多工作，并使用

setTimeout（）

然而，它并没有按预期的那样工作，如果有人愿意帮忙，我已经把它交给了一个新的小提琴手：

守则本身是：

pane = $('#scrolldiv2');
pane.jScrollPane({animateEase: 'linear'});
api = pane.data('jsp');

$('#scrolldiv2').on('mousedown', function() {
    $(this).off().on('mousemove', function(e) {
        rel = $(this).relativePosition();
        py = e.pageY - rel.y;
        $t = $(this);
        if (py >= $(this).height() - 20) {
            scroll = setTimeout(scrollBy, 400, 20);
        }
        else if (py < 20) {
            scroll = setTimeout(scrollBy, 400, -20);
        }
        else {
            clearTimeout(scroll);
        }
    })
}).on('mouseup', function() {
    $(this).off('mousemove');
    clearTimeout(scroll);
})

var scrollBy = function(v) {
    if (api.getContentPositionY < 20 & v == -20) {
        api.scrollByY(v + api.getContentPositionY);
        clearTimeout(scroll);
    } else if (((api.getContentHeight - $t.height()) - api.getContentPositionY) < 20 & v == 20) {
        api.scrollByY((api.getContentHeight - $t.height()) - api.getContentPositionY);
        clearTimeout(scroll);
    } else {
        api.scrollByY(v, true)
        scroll = setTimeout(scrollBy, 400, v)
    }
}

$.fn.extend({
    relativePosition: function() {
        var t = this.get(0),
            x, y;
        if (t.offsetParent) {
            x = t.offsetLeft;
            y = t.offsetTop;
            while ((t = t.offsetParent)) {
                x += t.offsetLeft;
                y += t.offsetTop;
            }
        }
        return {
            x: x,
            y: y
        }
    },
})​

pane=$（'#scrolldiv2'）；
jScrollPane（{animateEase:'linear'}）；
api=pane.data（'jsp'）；
$（'#scrolldiv2'）。on（'mousedown'，function（）{
$（this）.off（）.on（'mousemove'，函数（e）{
rel=$（this.relativePosition（）；
py=e.pageY-相对y；
$t=$（此项）；
如果（py>=$（this）.height（）-20）{
滚动=设置超时（滚动，400，20）；
}
否则如果（py<20）{
滚动=设置超时（滚动，400，-20）；
}
否则{
清除超时（滚动）；
}
})
}).on（'mouseup'，function（）{
$（this.off（'mousemove'）；
清除超时（滚动）；
})
var scrollBy=函数（v）{
如果（api.getContentPositionY<20&v==-20）{
scrollby（v+api.getContentPositionY）；
清除超时（滚动）；
}如果（（api.getContentHeight-$t.height（））-api.getContentPositionY）<20&v==20）{
scrollby（（api.getContentHeight-$t.height（））-api.getContentPositionY）；
清除超时（滚动）；
}否则{
api.scrollby（v，true）
滚动=设置超时（滚动，400，v）
}
}
$.fn.extend({
relativePosition:function（）{
var t=此.get（0），
x、 y；
如果（t.抵销父项）{
x=t.offsetLeft；
y=t.offsetTop；
而（（t=t.offsetParent））{
x+=t.offsetLeft；
y+=t.offsetTop；
}
}
返回{
x:x，
y:y
}
},
})​

我真的不想这么说，我知道这是一个问题，即使我在更新这个插件时也遇到了，但是在旧插件（）中，基本调用也可以正常工作。因此，我恢复了我的副本。

您只需根据鼠标离div末尾的距离向下/向上滚动即可；没有本机解决方案好，但它完成了任务（）

$（'#scrolldiv2'）.jScrollPane（）；
var topScroll=$（'#scrolldiv2'）.offset（）.top，
endScroll=topScroll+$（'#scrolldiv2'）。高度（），
f=（$（'scrolldiv2'）.height（）/$（'scrolldiv2.jspPane'）.height（））*5，
选择=假，
_普雷维；
$（文档）.mousemove（函数（e）{
var mY；
var delta=_prevY-e.pageY；
如果（（e.pageY0）|
（e.pageY>topScroll&（mY=（e.pageY-（topScroll+80））/f）<0）{
如果（选择和（增量>10 | |增量<-10））
$（'#scrolldiv2'）.data（'jsp'）.scrollby（mY，false）；
} 
})   
$（'#scrolldiv2'）.mousedown（函数（e）{u prevY=e.pageY；selection=true；}）
$（窗口）.mouseup（函数（）{selection=false；}）​

---

---

顺便说一句，它反转选择的原因是因为它到达了文档的末尾，只需在下面添加一些空格，问题就解决了。

我宁愿不还原，因为我正在使用他们的API做很多事情！我只是假设它实际上会以高亮/拖动方式滚动。。。哦，好吧，我已经找到了代码的部分，所以也许我必须自己添加功能并在github上提交一个拉取请求。太棒了，你实际上刚刚消除了我的头痛！谢谢当我看到它时，它是如此简单，但当你试图用不同的方式做某事时，可以说很难让自己摆脱“常规”！

$('#scrolldiv2').jScrollPane();

var topScroll = $('#scrolldiv2').offset().top,
    endScroll = topScroll + $('#scrolldiv2').height(),
    f = ($('#scrolldiv2').height() / $('#scrolldiv2 .jspPane').height())*5 ,
    selection = false,
    _prevY;

$(document).mousemove(function(e){
    var mY;
    var delta = _prevY - e.pageY;
    if((e.pageY < endScroll && (mY = ((e.pageY - endScroll + 80)/f)) > 0) || 
       (e.pageY > topScroll && (mY = (e.pageY - (topScroll + 80))/f) < 0)){
          if(selection && (delta > 10 || delta < -10) )
          $('#scrolldiv2').data('jsp').scrollByY(mY, false) ;
    } 
})   

$('#scrolldiv2').mousedown(function(e){_prevY = e.pageY; selection = true ;})
$(window).mouseup(function(){selection = false ;})​