jScrollPane在元素拖动时滚动

jScrollPane scrolling on element drag

本文关键字：滚动 拖动 元素 jScrollPane      更新时间：2023-09-26

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

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

基本上，正如你所看到的，高亮显示和滚动在顶部框（默认的overflow: auto框）中有效，但在第二个框中无效，更重要的是，一旦你到达底部，它就会反转你的选择！

所以，我的问题是：有办法解决这个问题吗？如果是，如何？

更新

我已经对此做了很多工作，并使用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
        }
    },
})​

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

$('#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 ;})​

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

我真的不想这么说，我知道这是一个问题，即使我在更新这个插件时遇到了这个问题，但在旧插件中（如图所示），它与基本调用配合得很好。所以我只是恢复了我的副本。

相关文章：