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

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必须大于您的身体（例如3000px）。

至于无限滚动效果，您几乎必须自行完成，因为我不知道您将输入哪种数据。 但我会解释。

内容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。