Создание расширяющегося DIV/Canvas с горизонтальной прокруткой с помощью JavaScript для колеса

Question

Хорошо, вот что я пытаюсь сделать. Я искал в Интернете интересную временную шкалу, которую я могу купить - позволяя уменьшать масштаб, публиковать на ней события и так далее. Однако все примеры, которые я нашел, либо слишком дороги, либо просто бесполезны.

Итак, я решил создать свой собственный, но есть два элемента, с которыми у меня проблемы.

1) Преобразование колесика прокрутки в прокрутку влево-вправо (поэтому не вверх-вниз). Я не могу найти легкий и быстрый способ сделать это.

Но, что более важно..

2) Мне нужна область, на которой я буду показывать временную шкалу, чтобы она автоматически расширялась при прокрутке. Так что, если я прокручиваю вниз, он добавит "эквивалентную" область справа и вниз слева. Так что я думал, как сделать iFrame (уже использую их), и когда вы прокручиваете его, он просто добавляет больше "временной шкалы" слева или справа, загружает все, что ему нужно для загрузки из БД / списка событий, и так далее, до бесконечности, таким образом создавая постоянно расширяющийся список блоков, которые имеют размер времени.

Если я могу сделать две вещи выше, то я настроен - все остальное (загрузка / позиционирование) я могу выяснить - только эти две вещи ускользают от моего воображения и способности найти ответ.

Answer 1

В основном вам нужен сценарий горизонтальной бесконечной прокрутки.

Возьмите этот плагин, который я написал:

 $.fn.hScroll = function( options )
 {
  function scroll( obj, e )
  {
    var evt = e.originalEvent;
    var direction = evt.detail ? evt.detail * (-120) : evt.wheelDelta;

    if( direction > 0)
    {
        direction =  $(obj).scrollLeft() - 120;
    }
    else
    {
        direction = $(obj).scrollLeft() + 120;
    }

    $(obj).scrollLeft( direction );

    e.preventDefault();
  }

  $(this).width( $(this).find('div').width() );

  $(this).bind('DOMMouseScroll mousewheel', function( e )
  {
      scroll( this, e );
  });
}

Инициализируйте его с помощью:

  $('body').hScroll();

Делает ваш сайт горизонтально прокручиваемым.

Div с содержимым должен быть шире, чем ваше тело (например, 3000 пикселей).

Что касается эффекта бесконечной прокрутки, вы в значительной степени должны делать это самостоятельно, потому что я не могу знать, какие данные вы вводите. Но я объясню.

Ваши дочерние элементы в div содержимого должны быть перемещены влево. (каждый новый добавленный div не будет переходить на новую строку).

Установите интервал, чтобы проверять, находится ли позиция scrollLeft у пользователя ближе к концу контента (точно так же, как pinterest и аналогичный сайт).

    function loadNewData(){ /* Your search for data and update here. */ }
    setInterval('loadNewData', 500);

искать новые данные в соответствии с вашими последними с помощью AJAX. Когда вы получаете новые данные, добавьте их в свой div содержимого (в div, который перемещается влево, как я писал ранее) и отметьте его как последний элемент.

Возможно, вы могли бы использовать свой идентификатор, чтобы отметить последний элемент в этом div.

   <div data-id="467" class="item"> // your data here  </div>

Вы можете получить его с помощью

   $('.item:last').attr('data-id');

с jQuery.