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

jQuery Scroll event firing without actually scrolling

本文关键字：不实际 滚动 Scroll 事件 jQuery      更新时间：2023-09-26

我的网站有动态加载内容的页面，而无需更改页面。我在我的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
    });
});

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

为什么会这样？有没有更好的方法可以做到这一点？

您应该使用以下模式：

$.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
相关文章：