Question

我正在使用保罗·爱尔兰的无限卷轴，但无限卷轴不会开始。我正在开发一个“包含”的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之前打电话给砌体，如下所示：

(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主题不起作用？

2 个答案: