无限滚动不起作用答案

【问题标题】：infinite scroll not working无限滚动不起作用
【发布时间】：2013-02-17 06:36:19
【问题描述】：

我正在为我的页面使用无限滚动插件，但在编写代码后它似乎不起作用。我滚动到页面底部但无限滚动没有被触发。我已经包含了所有必要的文件，但仍然没有用。我已经包含了 xhtml 页面。我浏览了 stackoverflow 网站，但找不到与我的问题类似的任何内容。

1)xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:c="http://java.sun.com/jsp/jstl/core">


<h:head>
    <link href="Css/StyleSheet.css" rel="stylesheet" type="text/css"
        media="screen" />



<script src="jquery.infinitescroll.js"></script>
<script>

  $('#box').infinitescroll({

        navSelector  : '#page-nav',            
                       // selector for the paged navigation (it will be hidden)
        nextSelector : '#page-nav a',    
                       // selector for the NEXT link (to page 2)
        itemSelector : '.box'         
                       // selector for all items you'll retrieve
        behaviour: 'twitter'               
      });
</script>

</h:head>



<h:body class="thrColElsHdr">

            <div class="box">   
                // Content

            </div>

<div  id="page-nav">
  <a href="getMoreStatusList.xhtml"></a>
</div>

            <!-- end #mainContent -->
        </div>


    </div>

</h:body>

【问题讨论】：

您正在引入无限滚动插件脚本，而不是 jquery 本身。此外，一旦你也有 jquery 进来，你可能希望将你的脚本包装在 document ready function 中。
包含 jquery 文件并将其包装在文档就绪函数中，但仍然没有触发。
我看到的唯一另一件事是您正在对一个 id 为 box 的元素（即$('#box')...）设置无限滚动，但您的标记中显示的元素有一个 box 类，而不是ID。试试改成$('.box').infinitescroll({...});
是的，改成$('.box') .infinitescroll({...});，但还是不行:(

标签： javascript jquery xhtml lazy-loading

【解决方案1】：

你在后面漏了一个逗号：

itemSelector : '.box'

【讨论】：