Question

我在jtml页面中集成了jscroll，但没有反映任何内容

标题部分

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
    <script src="js/jquery.jscroll.min.js" />
    <script src="js/jquery.jscroll.js" />
</head>

<body>
    <div class=".scroll">
        <!-- html code tag -->
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
        $('.scroll').jscroll({
            autoTrigger: true
        })
    });
    </script>
</body>

我指的是www.jscroll.com 但是没有发生任何事情，你能帮助我吗，我在这里犯了什么错误

更新：

 ![<html>

    <head>
    <meta charset="utf-8"/>
    <title>jQuery jScroll Plugin Example</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
    <script src="js/jquery.jscroll.js"/>

    <link type="text/css" rel="stylesheet" href="layout/css/styles.css" />

    </head>
    <body>

    <div class="scroll" style="margin-top:150px;" data-ui="jscroll-default">
    <h3>Page 1 of jScroll Example - jQuery Infinite Scrolling Plugin</h3>
    <p>
    This is the content of
    <strong>page 1</strong>
    in the jScroll example. Scroll to the bottom of this box to load the next set of content.
    </p>

    <p>This is example text for the jScroll demonstration. jScroll is a jQuery plugin for infinite scrolling, endless scrolling, lazy loading, auto-paging, or whatever you may call it.</p>
    <p>With jScroll, you can initialize the scroller on an element with a fixed height and overflow setting of "auto" or "scroll," or it can be set on a standard block-level element within the document and the scrolling will be initialized based on the brower window's scroll position.</p>
    <h3>Page 2</h3>
    <p>
    This is the content of
    <strong>page 2</strong>
    in the jScroll example. Scroll to the bottom of this box to load the next set of content.
    </p>
    <p>Fusce et nunc sed nibh eleifend posuere. Integer sodales, elit sit amet porta varius, augue elit consectetur tortor, vitae rhoncus diam ipsum sed quam. Nullam turpis magna, convallis ultrices auctor ut, gravida eu leo. Pellentesque ut risus nibh, in ultrices ante. Suspendisse potenti. Vestibulum dolor sapien, dapibus non fringilla at, fringilla sed ipsum. In adipiscing mi nec risus hendrerit sollicitudin. Nullam eget felis tellus. Quisque dapibus molestie scelerisque. Curabitur sit amet tortor erat, et pretium nisl. Phasellus posuere, nibh vel feugiat sagittis, ligula lorem porttitor sapien, quis aliquam nisl nulla vel nunc.</p>
    <h3>Page 3 - Final Page</h3>
    <p>
    This is the content of
    <strong>page 3</strong>
    in the jScroll example. This is the final page of content, and nothing more will be loaded when you scroll to the bottom of this page.
    </p>
    <p>
    This is the content of
    <strong>page 4</strong>
    in the jScroll example. This is the final page of content, and nothing more will be loaded when you scroll to the bottom of this page.
    </p>
    <p>
    This is the content of
    <strong>page 5</strong>
    in the jScroll example. This is the final page of content, and nothing more will be loaded when you scroll to the bottom of this page.
    </p>
    <p>
    This is the content of
    <strong>page 6</strong>
    in the jScroll example. This is the final page of content, and nothing more will be loaded when you scroll to the bottom of this page.
    </p>
    <p>
    This is the content of
    <strong>page 7</strong>
    in the jScroll example. This is the final page of content, and nothing more will be loaded when you scroll to the bottom of this page.
    </p>
    <p>Duis vel vestibulum tortor. Curabitur id nulla nec nunc porta blandit quis gravida eros. Proin dictum sagittis velit porta fringilla. Ut ac libero dui. Donec purus leo, semper condimentum porttitor vitae, feugiat vel elit. Etiam ut erat velit. Proin quis tortor lorem. Pellentesque ut lectus ligula. Donec ullamcorper, tellus at fringilla tristique, quam elit luctus felis, ut venenatis quam erat quis lacus. In consequat imperdiet magna posuere vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sodales, nisl eu accumsan molestie, mauris sem luctus sem, at volutpat turpis lorem non massa. Nulla erat turpis, auctor id congue ac, placerat et velit. Donec id ipsum erat, non pellentesque turpis. Nulla facilisi.</p>
    </div>
    <script type="text/javascript">
    $(document).ready(function() { 
    $('.scroll').jscroll({autoTrigger: true})});
    </script>
    </body>
    </html>]

我需要下面像屏幕截图

Answer 1

请参阅此处的延迟加载示例和jscroll

fibonacci

这里Product-Grid是div id，它包含所有其他div，它们是相同类型的，例如它的产品列表。

.pager'a：last'是分页属性类，类似于：last意味着 1→2＆GT;接下来
所以'a：last'获取下一个因为当你触发你需要加载下一个内容所以你会得到那个

的链接

现在当你获得内容时，如何添加以及需要添加的内容由.product-grid决定

和回调意味着在触发后调用函数，这样你就可以在这里添加lazyload

我希望现在明白

Answer 2

如前所述，您的插件会列出两次（您应该只调用一次以防止出现问题）。

您尝试拨打的课程也是div元素上的.scroll。不应该是一个＆＃39;。＆＃39;在班级名称中。

然而，当从jQuery调用它时，＆＃39;。＆＃39;如果您在哪里调用名为“滚动”的ID，则需要使用该类＆＃39;滚动＆＃39;来表示任何元素的简写。然后它将是＃，或者如果你想要解决一个元素，则不需要速记。

我已经为您清理了代码，只要内容大于视口，它就应该按原样运行。

<body>
    <div class="scroll">
    <!-- html code tag -->
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.scroll').jscroll({
                autoTrigger: true
            })
        });
    </script>
</body>

如何在html5页面中集成jscroll

2 个答案: