CSS：通过鼠标拖动实现双向无限滚动 [英] CSS: achieving TWO-WAY infinite scroll with mouse drag

问题描述

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

I'm trying to create an infinite scroll component.

我使用这个网站作为教程，但似乎我只能得到无限滚动在一个方式，因为当我添加元素到最左侧， scrollLeft 属性会自动调整，因此页面会发生奇怪的滚动，而不是平滑移动。

I'm using this site as a tutorial, but it seems that I can only get the infinite scroll on one way, because when I add elements to the leftmost side, the scrollLeft property auto-adjusts thus the page gets a quirky scroll, jumping instead of making a smooth movement.

有什么方法实现无限滚动双向？

Is there any way of achieving infinite scroll both-ways? I don't plan to use scrolling buttons, just mouse drag for moving the scroll view.

推荐答案

我发布了一个演示为你这里基本上，你只需要知道你正在添加的内容的宽度，在这里

I posted a demo for you here... basically, you just need to know the width of the content you are adding, which in this case is 310 pixels.

$ b

The script then adds the content, adjusts the scrollLeft and the width of the event panel.

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

从#temp div里面的内容只是为了这个例子。

This button click function adds the content from inside the #temp div just for this example.

这篇关于CSS：通过鼠标拖动实现双向无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！