如何在HTML5页面中集成Jscroll

Question

我已经将jscroll集成到html页面中，但是没有任何反映

标头部分

 <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示例

$('#product-grid').jscroll({  
        debug: true,
        autoTriggerUntil: 2,
        nextSelector: '.pager a:last',
        contentSelector: '.product-grid',
        callback:call()
    });

function call()
    {
        alert("hi");
        $("img.lazy").lazyload();
    }

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

.pager'a：last'是分页属性类，例如a：last表示1> 2> next
因此，“ a：last”会在触发时获取下一个链接，因为您需要加载下一个内容，这样您才能获得

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

和回调意味着触发后调用函数，因此您可以在此处添加lazyload

我希望现在清楚

Answer 2

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

另外，您尝试调用的类是div元素上的.scroll 。 不应有“。” 在班级名称中。

但是，当从jQuery调用“。”时。 是必需的，因为它是调用“ scroll”类的任何元素的简写形式，如果您在何处调用名为“ scroll”的ID，则它将是＃号，或者如果您要寻址一个元素，则不需要简写形式。

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

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

如何在HTML5页面中集成Jscroll

问题描述

2 个解决方案

解决方案1
4 2015-06-12 05:53:49

解决方案2
0 2015-06-11 13:24:32

如何在HTML5页面中集成Jscroll

问题描述

2 个解决方案

解决方案1 4 2015-06-12 05:53:49

解决方案2 0 2015-06-11 13:24:32

解决方案1
4 2015-06-12 05:53:49

解决方案2
0 2015-06-11 13:24:32