水平无限滚动答案

【问题标题】：horizontal infinite scroll水平无限滚动
【发布时间】：2012-09-29 19:52:20
【问题描述】：

我有一个水平图像列表，我希望在 div 中对其应用无限滚动。理想情况下，这只是窗口本身，但现在它是一个 div。

我认为这涉及到一点对 Paul Irish 的无限滚动的破解（？）我知道我现在可以在 1.2 中将 localMode 设置为 true 以使其在 div 内工作，但我也知道（认为）我需要诱使浏览器从“下一页”中思考内容。我不知道该怎么做。我已经搜索和搜索，现在我希望你们天才提供您的精彩想法。谢谢！

【问题讨论】：

标签： jquery horizontal-scrolling infinite-scroll

【解决方案1】：

Lazyload 正是我想要的。 http://www.appelsiini.net/projects/lazyload。我在一个名为#image_list 的容器中有一个图像列表。

$(document).ready(function () {
    $("#image_list img").lazyload({
          effect : "fadeIn"

      });
});

这很不言自明。然后我没有做最好的解释工作的水平无限列表包含在这个 div 中：

#image_list {
 margin: 0 auto;
 white-space: nowrap;
 width: auto;
 overflow: auto;
 clear: both;
 position: relative;
}

它实际上不是一个列表，因为 Firefox 拒绝不包装它！所以这是一个有无穷无尽的 td 的表格行：

<table>
 <tbody>
  <tr>
   <td><img src="img1.jpg" /></td>
   <td><img src="img2.jpg" /></td>
        ...
   <td><img src="img34.jpg" /></td>
  </tr>
 </tbody>
</table>

【讨论】：

【解决方案2】：

如果您希望元素水平排列，您将需要一个提供width 属性的容器。要使这种动态化，只需添加如下内容：

$(document).ready(function(){
  var totalWidth = 0;
  $('#container').children().each(function(){
    totalWidth += $(this).outerWidth();
  });
  $('#container').css('width', totalWidth);
});

如果您直接在 body 下使用该容器并给您的 body overflow:scroll 。然后将容器body 和html 都设置为 100% 的高度，这应该水平排列。

【讨论】：

谢谢。这当然有帮助。我仍然无法完全理解如何接近水平无限滚动。我知道它可以在 div 中工作，而且我知道它可以水平而不是垂直完成，我无法理解。我指的jquery插件是github.com/paulirish/infinite-scroll
这很容易。自动水平滚动是不可能的，因为width 永远不会超过窗口的宽度。如果是这样的话，在没有输入的情况下阅读文本会不会很烦人？
您需要将true 传递给outerWidth() 以使其在计算中包含边距：outerWidth(true)。详情请见api.jquery.com/outerWidth。