Question

小提琴：http://jsfiddle.net/RJShm/

我有一个jScrollPane，当前从左向右滚动，然后向左滚动，然后停止。我想要的是从左到右，从右到左连续滚动，然后重复。我使用pane.bind('jsp-scroll-x'...非常接近工作，但我似乎无法让它在一个周期后向右滚动。当前代码：

pane.bind('jsp-scroll-x', function (event, pos_x, at_left, at_right) {
  if (at_right)
  {
    api.scrollToX(0);
    $(this).unbind(event);
  }
});

我还希望在单击窗格中的任何内容（滚动条，箭头，内容，任何内容）时停止自动滚动，并且最好在没有单击几秒钟后重新启动。

因此，简而言之，我该如何：

使jScrollPane自动向左/向右滚动
点击时停止自动滚动
在窗格内没有点击几秒钟后重新启动自动滚动

由于

编辑：jScrollPane Settings和api。

Answer 1

我已经更新了切换无限滚动的处理程序，并且还实现了单击处理程序以暂停滚动并在超时（5秒）后恢复。请参阅下面的草稿代码并查看 DEMO： http://jsfiddle.net/p6jLt/

var defaultSettings = {
    showArrows: true,
    animateScroll: true,
    animateDuration: 5000
},
pauseSettings = {
    showArrows: true,
    animateScroll: false
};

var pane = $('.scroll-pane').jScrollPane(defaultSettings);

var api = pane.data('jsp');
var isFirst = true,
    posX = 0,
    isLeft = false,
    timer;

pane.bind('jsp-scroll-x', scrollFx)
    .mousedown(function () {

    //lets make sure the below is
    //executed only once after automatic croll
    if (posX != -1) {
        $(this).unbind('jsp-scroll-x');
        api.scrollToX(posX);
        api.reinitialise(pauseSettings); //no animation
        posX = -1;
    }
}).mouseup(function () {
    clearTimeout(timer); //clear any previous timer
    timer = setTimeout(function () {
        isFirst = true;
        posX = 0; //reset the killer switch
        api.reinitialise(defaultSettings); //animateed scroll
        pane.bind('jsp-scroll-x', scrollFx); //rebind
        api.scrollToX(isLeft ? 0 : api.getContentWidth()); //resume scroll
    }, 5000);
});

var scroll = api.scrollToX(api.getContentWidth());

function scrollFx(event, pos_x, at_left, at_right) {
    if (posX == -1) { //kill scroll
        $(this).unbind(event);
        return false;
    }

    if (at_right) {
        api.scrollToX(0);
        isLeft = true; //used for restart
    } else if (at_left && !isFirst) {
        api.scrollToX(api.getContentWidth());
        isLeft = false; //used for restart
    }
    isFirst = false;
    posX = pos_x;
}

问题：插件有时会出现滚动问题，但它并没有打破无限卷轴。您可以在滚动条上找到小小的希克斯，但它在大多数情况下都有效。彻底测试一下，看看它是怎么回事。

将jScrollPane设置为左右自动滚动，但在单击时暂停？

1 个答案: