Question

我正在构建我的第一个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功能，但我需要在我的特定项目中使用scrollTo的jQuery Object选择器。我知道我的HTML / CSS排列很好，因为只要另一个功能被注释掉，每个功能都可以运行。

（顺便说一句，我计划使用“next”变量来增加scrollTo按钮，一旦我弄清楚......与我的问题没有关系。）

非常感谢任何帮助。如果我需要提供任何其他信息，请告诉我。谢谢！

-Patrick

Answer 1

从以下网址了解如何使用JscrollPane的 ScrollTo 功能，

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

希望这会对你有帮助......

Answer 2

我也试图在一个脚本中同时使用jScrollpane（Kelvin Luck）和scrollTo（Ariel Flesler）插件。我遇到了一个简单的解决方案，如果你不一定需要动画滚动，它甚至不需要Ariel Flesler的真棒脚本。我希望能够在页面加载时滚动到项目列表中的标签。我是这样做的：

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

当列表变长时，确切定位有一个小错误，将尽快发布修复...

Answer 3

它们是互斥的，因为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

希望这有助于那里的人！

Answer 4

这不适用于所有用例（它只处理scrollToY和scrollToElement），但提供了一致的API，因此您只需使用$( /* ... */ ).scrollTo( /* number or selector */ )即可使用任何用例元素，jScrollPane或原生。

您可以通过推断method中传递的值来扩展target条件以满足所有其他jScrollPane方法。

(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 );
        }
    };
}();

如何在同一个脚本中使用jQuery jScrollPane和scrollTo插件

4 个答案: