jScrollPane прокрутка при перетаскивании элемента - PullRequest
Новая
       24

jScrollPane прокрутка при перетаскивании элемента

5 голосов
/ 14 марта 2012

Я пытаюсь прокрутить, выделив текст и перетащив вниз. Теперь, как вы, наверное, знаете, это стандартное поведение по умолчанию для стандартного элемента overflow: auto, однако я пытаюсь сделать это с помощью некоторых необычных полос прокрутки, предоставленных 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
        }
    },
})​

Ответы [ 2 ]

3 голосов
/ 28 марта 2012

Вам просто нужно прокрутить вниз / вверх в зависимости от того, как близко мышь находится к концу 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 ;})​

Кстати, причина, по которой он инвертирует выбор, состоит в том, что он достиг концадокумент, просто оставьте там пробел и проблема решена.

0 голосов
/ 22 марта 2012

Мне очень неприятно это говорить, я знаю, что это проблема, с которой я столкнулся даже при обновлении этого плагина, но в старом плагине (, замеченном здесь ) он прекрасно работает с базовым вызовом.Поэтому я просто отменил свою копию.

...