0

フィドル: http://jsfiddle.net/RJShm/

現在、左から右にスクロールしてから左に戻って停止する jScrollPane があります。私が望むのは、これが左から右、右から左に継続的にスクロールしてから繰り返すことです。私はこれを を使用して作業することにかなり近づいていますpane.bind('jsp-scroll-x'...が、1サイクル後に右にスクロールできないようです。そのための現在のコード:

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. ペイン内で数秒間クリックしないと、自動スクロールが再開されます

ありがとう

EDIT : jScrollPane Settings、および便宜上api 。

4

1 に答える 1

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

問題点:プラグインは時々スクロールで少しバグがありますが、無限スクロールを壊すことはありません。スクロールに小さなヒックが見られるかもしれませんが、ほとんどの場合は機能します。徹底的にテストして、どうなるか見てみましょう。

于 2013-03-11T20:01:36.530 に答える