CSS: achieving TWO-WAY infinite scroll with mouse drag

I'm trying to create an infinite scroll component.

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 move开发者_运维知识库ment.

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.

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 );
 })

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