Question

我的网站包含动态加载内容而无需更改网页的网页。我在我的javascript文件中创建了以下jquery插件，当页面滚动到底部时，它应该做某些事情。

$.fn.scrollEvent= function() {
    $(document).on("scroll", function() {
        console.log("Scroll");
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
            // do stuff
        }
    });
};

因此，当单击一个菜单项时，我会加载新页面内容，然后调用jquery插件，以便在新页面上使用它。

$(document).ready(function() {
    $(document).on("click", ".menu-item", function() {
        $.fn.scrollEvent();
        // do other page stuff
    });
});

但是，我注意到的是，当我调用插件时，控制台在我在页面上执行任何操作之前都会记录“Scroll”。所以滚动事件被调用一次甚至两次，而我根本没有滚动。

为什么会发生这种情况？有更好的方法吗？

Answer 1

您应该使用以下模式：

$.fn.scrollEvent = function () {
    return this.on("scroll", function () {
        console.log("Scroll");
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
            // do stuff
        }
    });
};

$(window).scrollEvent(); //bind event to windwo or any element

jQuery Scroll事件触发而不实际滚动

1 个答案: