首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >将jScrollPane设置为“自动左”和“右”,但单击“暂停”?

将jScrollPane设置为“自动左”和“右”,但单击“暂停”?
EN

Stack Overflow用户
提问于 2013-03-07 22:21:24
回答 1查看 1.2K关注 0票数 0

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

我有一个jScrollPane,目前滚动从左,右,然后向后左,并停止。我想要的是这是不断滚动从左到右,从右到左,然后重复。我已经非常接近于使用pane.bind('jsp-scroll-x'...工作,但我似乎无法让它在一个周期后向右滚动。目前的代码是:

代码语言:javascript
复制
pane.bind('jsp-scroll-x', function (event, pos_x, at_left, at_right) {
  if (at_right)
  {
    api.scrollToX(0);
    $(this).unbind(event);
  }
});

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

因此,简而言之,我如何:

  1. 自动使jScrollPane滚动左/右
  2. 点击时停止自动滚动
  3. 在窗格内单击几秒钟后重新启动自动滚动。

谢谢

为了您的方便,编辑jScrollPane设置api接口

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-03-11 20:01:36

我已经更新了用于切换无限滚动的处理程序,还实现了单击处理程序来暂停滚动并在超时(5秒)后恢复。请参阅下面的代码草稿,并检查演示: http://jsfiddle.net/p6jLt/

代码语言:javascript
复制
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;
}

问题:插件有时带有滚动器,但它不会破坏无限滚动。你可能会在卷轴上找到小希克斯,但它在大部分情况下都能工作。彻底测试一下,看看结果如何。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/15282918

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档