Question

您好我正在寻找一种解决方案，让jScrollPane在页面加载时自动滚动。我发现了一些类似的问题，但它们不是我想要的（scrollBy和scrollTo方法）。我目前有以下内容：

$(function(){
$('.scroll-pane').jScrollPane({
showArrows: true,
autoReinitialise: true
});
});

我想要实现的是让我的水平仅jScrollPane平滑地滚动我的内容（照片）： 1.向右移动300px， 2.然后向左滚动300px（回到开头）， 3.最后到此为止。

设置允许我控制滚动的平滑度/持续时间/间隔也很有用。

如果您可能想知道它的用途，我不希望任何观众错过他们应该滚动该区域。您可以在以下网址查看网站：http://www.giamarescotti.com/v2/

非常感谢您提出任何建议。

此致戴夫

Answer 1

JScrollPane支持动画。您需要添加animateScroll和animateDuration（以毫秒为单位），使用scrollToX滚动到#imagesContainer的宽度，然后返回0：

$(function(){
  var pane = $('.scroll-pane');
  pane.jScrollPane({
    showArrows: true,
    autoReinitialise: true,
    animateScroll: true, //added
    animateDuration : 10000//added - length each way in milliseconds
  });

  var api = pane.data('jsp');

  //listen to the x-axis scrolling event
  pane.bind('jsp-scroll-x', function (event, pos_x, at_left, at_right) {
    //we're at the right now lets scroll back to the left
    if (at_right)
    {
      api.scrollToX(0);
      $(this).unbind(event);//added with edit
    }
  });

  //initial animate scroll to the right
  api.scrollToX(parseInt($('#imagesContainer').width()));
});

让jQuery jScrollPane在加载时自动滚动一段时间

1 个答案: