包含的 tumblr 主题上的无限滚动不起作用？

Question

我在 paul irish 的无限滚动中使用砌体，但无限滚动不会启动。我正在开发 'contained' tumblr 主题。

我认为这与它没有到达底部有关，因为如果我打开检查元素并且页面垂直挤压一点，然后滚动，无限滚动会踢它。

那么有没有办法让无限滚动在该页面底部之前触发？

相关代码如下：

(function () {
    var $tumblelog = $('#tumblrcontent');
    $tumblelog.infinitescroll({
        navSelector: ".pagination",
        nextSelector: ".pagination a:last-child",
        itemSelector: "article",
        loading: {
            finishedMsg: "<p> </p>",
            img : "http://i58.tinypic.com/34huesh.gif",
            msg: null,
            msgText: "<p> </p>"
        },
    },

    function (newElements) {
        var $newElems = $(newElements).css({
            opacity: 0
        });
        $newElems.imagesLoaded(function () {
            $newElems.animate({
                opacity: 1
            });
            $tumblelog.masonry('appended', $newElems);
        });
    });
    $tumblelog.imagesLoaded(function () {
        $tumblelog.masonry({
            columnWidth: function (containerWidth) {
                return containerWidth / 100;
            }
        });
    });
})();

Answer 1

您正在加载 3 个不同版本的 jQuery，都已过时。您只需加载一个版本。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">    </script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">   </script>
<!--//////////End Tooltips/////-->
<!--//////////Masonry////////////-->
<!--Links to jQuery library, Masonry, infinite scroll and imagesLoaded-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script>

附录

您的 jquery.style-my-tooltips.js 太旧（超过 3 年），无法与 jQuery 1.11.3 兼容，因此您需要使用旧版本的 jQuery。顺便说一句，您的页面也有大量与 dontbrag.tumblr.com 相关的错误。

你也应该在infinitescroll之前调用masonry，像这样：

(function () {
 var $tumblelog = $('#tumblrcontent');
 $tumblelog.imagesLoaded(function () {
    $tumblelog.masonry({
        columnWidth: function (containerWidth) {
            return containerWidth / 100;
        }
    });
});

$tumblelog.infinitescroll({
    navSelector: ".pagination",
    nextSelector: ".pagination a:last-child",
    itemSelector: "article",
    loading: {
        finishedMsg: "<p> </p>",
        img : "http://i58.tinypic.com/34huesh.gif",
        msg: null,
        msgText: "<p> </p>"
    },
},

function (newElements) {
    var $newElems = $(newElements).css({
        opacity: 0
    });
    $newElems.imagesLoaded(function () {
        $newElems.animate({
            opacity: 1
        });
        $tumblelog.masonry('appended', $newElems);
    });
});

})();

Answer 2

解决了。我在 github page 中找到了一个选项，用于对具有 overflow:auto; 的元素使用无限滚动。只需正确阅读文档即可。

包含的 tumblr 主题上的无限滚动不起作用？

infinite scroll on contained tumblr theme not working?

jquery

infinite-scroll