CSS: достижение двухсторонней бесконечной прокрутки с помощью мыши

Question

Я пытаюсь создать бесконечный компонент прокрутки.

Я использую этот сайт в качестве учебного пособия, но кажется, что я могу получить бесконечную прокрутку только в одну сторону, потому что, когда я добавляю элементы в крайнюю левую сторону, scrollLeft * Свойство 1006 * автоматически настраивается, поэтому страница получает необычный свиток, прыгая вместо плавного движения.

Есть ли способ достижения бесконечной прокрутки в обе стороны? Я не планирую использовать кнопки прокрутки, просто перетащите мышью для перемещения вида прокрутки.

Answer 1

Я разместил демо для вас здесь ... в основном вам просто нужно знать ширину добавляемого контента, которая в данном случае составляет 310 пикселей.

Затем скрипт добавляет содержимое, корректирует scrollLeft и ширину панели событий.

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

Эта функция нажатия кнопки добавляет содержимое из #temp div только для этого примера.