CSS：通过鼠标拖动实现双向无限滚动

Question

我正在尝试创建一个无限滚动组件。

我正在使用this 站点作为教程，但似乎我只能通过一种方式获得无限滚动，因为当我向最左侧添加元素时，scrollLeft 属性自动调整，因此页面得到一个古怪的滚动，跳跃而不是平滑移动。

有没有办法实现双向无限滚动？我不打算使用滚动按钮，只需鼠标拖动即可移动滚动视图。

Answer 1

我发布了demo for you here...基本上，您只需要知道要添加的内容的宽度，在本例中为 310 像素。

脚本然后添加内容，调整scrollLeft和事件面板的宽度。

 $('button').click(function(){
  $('li.welcome').after( $('#temp').html() );
  $('#timeline')[0].scrollLeft += 310;
  $('.tl-events').css('width', $('.tl-events').width() + 310 );
 })

这个按钮点击函数从#temp div内部添加内容，只是为了这个例子。