CSS：如何通过鼠标拖拽实现双向无限滚动？

Question

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

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

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

- Miguel Ping

---

你是想同时实现向下和向右滚动，还是左右滚动？ - Jeffery To

Answer 1

我在这里为您发布了一个演示demo链接...基本上，你只需要知道你要添加的内容的宽度，这个案例中是310像素。

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

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

这个按钮点击函数会将 #temp div 内容添加到此示例中。

- Mottie

---

谢谢，这个方法很有效。虽然我在使用GWT实现它时，在主机模式下有点小问题（滚动条来回移动），但是它正常工作了。 - Miguel Ping

这太棒了。很遗憾这不是用纯CSS更容易实现的，但这是一个非常好的方法，也很容易自定义。谢谢！ - Owen