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

Question

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

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

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

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

2) Мне нужна площадь я буду показывать график на автоматическое расширение, как я идти о моей прокруткой. Итак, если я прокручу вниз, он добавит «эквивалентную» область справа и вниз, слева. Поэтому я думал, как сделать iFrame (уже использую их), и когда вы прокручиваете его, просто добавляет больше «временной шкалы» слева или справа, загружает все, что нужно для загрузки из DB/списка событий, и так далее, ad infinitum, тем самым создавая постоянно расширяющийся список блоков, размер которых зависит от времени.

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

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, который плавает слева, как я писал ранее) и отмечаем его как ваш последний элемент.

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

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

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

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

с JQuery.