Как использовать плагины jQuery jScrollPane и scrollTo в одном скрипте - PullRequest
Новая
       51

Как использовать плагины jQuery jScrollPane и scrollTo в одном скрипте

5 голосов
/ 15 июля 2011

Я создаю свой первый сайт js / jQuery и столкнулся с ошибкой. Я пытаюсь использовать плагины jScrollpane (Kelvin Luck) и scrollTo (Ariel Flesler) в одном скрипте. Если я закомментирую один, другой работает. Они взаимоисключающие? Нужно ли отключить функциональность из jScrollpane, чтобы удалить конфликт вызовов scrollTo или что-то еще? (Понятия не имею, как это сделать).

Я использую jScrollPane 2beta11 и scrollTo 1.4.2. Вот мой урезанный код, использующий оба: 

// JavaScript Document
$(document).ready(function() {

    //jScrollPane Init
    $('#scrollingDiv').jScrollPane({
    });

    //scrollTo Refresh
    $('div.scroll-pane').scrollTo( 0 );
    $.scrollTo( 0 );

    //Buttons
    var $scrollDiv = $('#scrollingDiv');
    var next = 1;

    $('#but-rt').click(function(){
    $scrollDiv.stop().scrollTo( 'li:eq(1)', 800 );
    next = next + 1;
    });

});

Я знаю, что jScrollPane имеет свою собственную функцию scrollTo, но мне нужны селекторы jQuery для scrollTo в моем конкретном проекте. Я знаю, что у меня все в порядке с HTML / CSS, потому что каждая функция работает, пока другая закомментирована.

(Кстати, я планирую использовать переменную "next" для увеличения кнопки scrollTo, как только выясню, как ... это не связано с моей проблемой.)

Любая помощь очень ценится. Дайте мне знать, если есть что-нибудь еще, что мне нужно предоставить. Спасибо!

-Patrick

Ответы [ 4 ]

2 голосов
/ 19 марта 2013

Я тоже пытался использовать плагины jScrollpane (Kelvin Luck) и scrollTo (Ariel Flesler) в одном скрипте. Я наткнулся на простое решение, которое даже не требует скрипта AWESOME Ариэля Флезлера, если вам не требуется анимационная прокрутка. Я хотел иметь возможность прокручивать ярлык в списке элементов при загрузке страницы. Вот как я это сделал: 

$(function()
    //Declare the ID or ClassName of the Scroll Element
    //and the ID or ClassName of the label to scroll to

    MyList = $('#MyElementID OR .MyElementClassName');
    MyLabel = $('#MyElementID OR .MyElementClassName');

    // Initiate the Scrollpane
    MyScroll = $(MyList).jScrollPane();

    // Connect to the jScrollPaneAPI
    jScrollPaneAPI = MyScroll.data('jsp');

    // Get position co-ordinates of the Label
    var MyLabelPosition = $(MyLabel).position();

    // Convert position co-ordinates to an Integer
    MyLabelPosition = Math.abs(MyLabelPosition.top);

    // Scroll to the Label (0-x, vertical scrolling) :)
    jScrollPaneAPI.scrollTo(0, MyLabelPosition-3, true);
});

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

2 голосов
/ 15 июля 2011

Посмотрите, как использовать ScrollTo функциональность JscrollPane из следующего URL,

http://jscrollpane.kelvinluck.com/scroll_to.html

Надеюсь, это поможет вам ...

1 голос
/ 25 сентября 2011

Они являются взаимоисключающими, потому что jScrollPane удаляет реальную прокрутку и заменяет ее сложными вставками в ящиках, перемещаемыми относительно друг друга с помощью JS.

Вот как я успешно их смешал - у меня был горизонтальный список миниатюр; этот код прокручивал миниатюры к центру:

Активированная jScrollPane: 

specialScrolling = $('#scrollingpart').jScrollPane();

В моем коде serialScroll, где я обычно звонил бы 

$('#scrollingpart').trigger('goto', [pos]);

в моем случае, внутри моего 

onBefore:function(e, elem, $pane, $items, pos)

Я поставил код так: 

jScrollPaneAPI = specialScrolling.data('jsp');
//get the api to manipulate the special scrolling are

scrollpos=(Math.abs(parseInt($('.jspPane').css('left'), 10)));
//get where we are currently scrolled -- since this is a negative number, 
//get the absolute value

var position = $('#scrollingpart .oneitem').eq(pos).position();
//get the relative offset location of the item we are targetting -- 
//note "pos" which is the index number for the items that you can access 
//in serialScroll's onBefore:function

itempos=Math.abs(position.left);
//get just the x-axis location -- your layout might be different

jScrollPaneAPI.scrollBy(itempos-scrollpos-480, 0, true);
//the 480 worked for my layout; the key is to subtract the 2 values as above

Надеюсь, это кому-нибудь поможет!

0 голосов
/ 12 сентября 2013

Это не подходит для всех случаев использования (оно обрабатывает только scrollToY и scrollToElement), но предлагает согласованный API, так что вы можете просто использовать $( /* ... */ ).scrollTo( /* number or selector */ ) и оно будет работать с любым элементом, jScrollPane или родной.

Вы можете расширить условие method для обслуживания всех других методов jScrollPane, выведя значение, переданное в target, хотя. 

(function scrollPaneScrollTo(){
    // Save the original scrollTo function
    var $defaultScrollTo = $.fn.scrollTo;

    // Replace it with a wrapper which detects whether the element
    // is an instance of jScrollPane or not
    $.fn.scrollTo = function $scrollToWrapper( target ) {
        var $element = $( this ),
            jscroll  = $element.data( 'jsp' ),
            args     = [].slice.call( arguments, 0 ),
            method   = typeof target === 'number' ? 'scrollToY' : 'scrollToElement';

        if ( jscroll ) {
            return jscroll[ method ].call( $element, target, true );
        }
        else {
            return $defaultScrollTo.apply( $element, args );
        }
    };
}();
...