使用Wheel JavaScript使用水平滚动创建扩展的DIV /画布

Question

Ok - here is what I am trying to do. I was looking online for a cool timeline that I can purchase - allowing zoom in zoom out, posting of events on it, and so on. However, all the examples I found are either too expensive or just downright useless.

So, I have decided to create my own, but there are two elements that I am having trouble with.

1) Converting the wheel scroll to left-right scrolling (so not up-down). I can't seem to find an easy and quick way to do this.

But, more importantly..

2) I need the area I will be showing the timeline on to automatically expand as I go about my scrolling. So, if I scroll down, it will add an "equivalent" area on the right, and down, on the left. So I was thinking like making an iFrame (already use these) and when you scroll it just adds more "timeline" on the left or the right, loads what ever it needs to load from the DB/list of events, and so on, ad infinitum, thus creating an ever-expanding list of blocks that are time-sized.

If I can do the two things above, then I am set - the rest (loading/positioning) I can figure out - just these two things are eluding my imagination and ability to find an answer.

Answer 1

Basically you need a horizontal infinite scroll script.

Take this plugin I wrote:

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

Initialize it with:

  $('body').hScroll();

Makes your website a horizontally scrollable website.

Your content div must be wider than your body (ex. 3000px).

As for the infinite scrolling effect you pretty much gotta do that your self because I can't know what kind of data you'll input. But I'll explain.

Your children elements in the content div must be floated to left. (every new appended div will not go to new line).

Set an interval to check if the user's scrollLeft position is near the end of the content (just like pinterest and similar site).

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

search for new data according to your last one with AJAX. When you get new data, append it into your content div (in a div that's floated left, as I wrote previously), and mark it as your last item.

Maybe you could use your ID to mark the last item on it's div.

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

You can fetch it with

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

with jQuery.