jScrollPane在元素拖动时滚动

Question

我试图通过突出显示文本并向下拖动来滚动.现在,正如您可能已经知道的那样,这是标准overflow: auto元素的标准默认行为,但是我试图通过Kelvin Luck的jQuery jScrollPane提供一些花哨的滚动条.

我在这里创造了一个小提琴:DEMO

基本上你可以看到,突出显示和滚动工作在顶部框(默认overflow: auto框),但在第二个它没有,并且,复合事项,一旦你到达底部它改变您的选择!

所以,我的问题是这些(这些):有没有办法解决这个问题？如果是这样,怎么样？

UPDATE

我一直在研究这个问题并且已经找到了一个小问题 setTimeout()

然而,它没有按预期工作,如果有人愿意帮助我把它分成一个新的小提琴:jsFiddle

代码本身是:

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
        }
    },
})?

Answer 1

您只需根据鼠标距离 div 末尾的距离向下/向上滚动即可；不如本机解决方案好，但它完成了工作（http://jsfiddle.net/PWYpu/25/）

\n\n

$(\'#scrolldiv2\').jScrollPane();\n\nvar topScroll = $(\'#scrolldiv2\').offset().top,\n    endScroll = topScroll + $(\'#scrolldiv2\').height(),\n    f = ($(\'#scrolldiv2\').height() / $(\'#scrolldiv2 .jspPane\').height())*5 ,\n    selection = false,\n    _prevY;\n\n$(document).mousemove(function(e){\n    var mY;\n    var delta = _prevY - e.pageY;\n    if((e.pageY < endScroll && (mY = ((e.pageY - endScroll + 80)/f)) > 0) || \n       (e.pageY > topScroll && (mY = (e.pageY - (topScroll + 80))/f) < 0)){\n          if(selection && (delta > 10 || delta < -10) )\n          $(\'#scrolldiv2\').data(\'jsp\').scrollByY(mY, false) ;\n    } \n})   \n\n$(\'#scrolldiv2\').mousedown(function(e){_prevY = e.pageY; selection = true ;})\n$(window).mouseup(function(){selection = false ;})\xe2\x80\x8b\n

\n\n\n\n

顺便说一句，它反转选择的原因是因为它到达了文档的末尾，只需在那里放置一些空白即可解决问题。

\n