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内的内容。