防止内容推送到顶部时触发滚动事件答案

【问题标题】：Prevent scroll event triggered when content push at top防止内容推送到顶部时触发滚动事件
【发布时间】：2015-04-17 07:45:28
【问题描述】：

我注意到当某些内容通过 ajax 推送到页面顶部时，jquery 滚动事件会自动触发。任何专家都知道如何避免在添加内容时触发滚动事件？但是当用户运行鼠标滚轮、上下翻页以及上下键盘时可能触发滚动事件？

$(window).on('scroll', function () {
        console.log("User manual scrolled.");
    });

基于此示例。 https://jsfiddle.net/q00jnv4n/

【问题讨论】：

哪个 jQuery 版本？我在 jQuery 2.1.3 中没有看到这种行为——jsfiddle.net/ndnz8v79
jquery 2.1.1 版本。
基于这个例子，它似乎会在 2.1.1 或 2.1.3 版本中触发事件。 jsfiddle.net/q00jnv4n
因为 $(window).scrollTop(divHeight); 函数中的那一行 AddContent()
@Mah Jin Khai：您能否阐明您的总体目标，而不是仅仅试图“防止滚动事件”？由于您只关注问题的一个细节，因此问题并不清楚。谢谢。

标签： jquery

【解决方案1】：

.off 函数用于删除事件处理程序。

您应该在通过 ajax 加载内容之前使用$(window).off("scroll")，然后在加载内容后再次使用$(window).on('scroll', function () {

通过使用.off，您的滚动处理程序将在网站上加载内容时被删除。

【讨论】：

【解决方案2】：

停止显示的一个选项似乎在移动是根据#result div 的高度变化量来调整scrollTop，例如scrollTop = (scrollTop + newHeight - oldHeight):

function AddContent() {
    var height = $('#result').height();
    console.log("height: " + height);
    $(".UnloadedPara").each(function () {
        //console.log();
        $(this).replaceWith("<div>This is some new paragraph</div>");
    });

    var newHeight = $('#result').height();
    $(window).scrollTop($(window).scrollTop() + newHeight - height);
}

JSFiddle: https://jsfiddle.net/TrueBlueAussie/q00jnv4n/12/

【讨论】：

这不是 OP 正在寻找的答案。
@Shoaib Shakeel：在这种情况下：我很高兴你理解这个问题（不清楚）。或许你可以澄清一下？
$(window).scrollTop 在调用时触发事件“滚动”。 OP 希望在单击 Add Content 按钮时抑制此事件。
@Shoaib Shakeel：对我来说听起来像是一个 X-Y 问题。我更愿意听到 OP 的总体目标，而不是他们认为需要的一个具体细节。我会要求他们澄清:)
谢谢大家。我有一些解决方法，稍后会发布，因为我现在正忙于一些事情。

【解决方案3】：

您在代码中使用了window.scrollTop()。它将自动触发jQuery 中的滚动事件，因为jQuery 在后台使用window.scrollTo()。

您不能抑制由此触发的“滚动”事件。但是您可以使用 hack 来检测在您调用 window.scrollTop() 的“AddContent”之后是否调用了滚动事件。您可以通过将AddContent 中的布尔变量设置为false 来实现。如果变量是false，请检查您的滚动事件处理程序。如果是false 则将其设置为true 并且不执行任何操作。否则执行您想要的操作。

我分叉了你的 jsfiddle 并更新了它：JsFiddle

【讨论】：

【解决方案4】：

参考this的帖子，存在一个只听鼠标滚动的事件。

$(window).bind('mousewheel DOMMouseScroll', function(e){
    if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
        // scroll up
    } else {
        // scroll down
    }
});

问候提摩太

【讨论】：

【解决方案5】：

这只是一种解决方法，但如果您需要快速修复，可以在顶部加载新内容后让窗口滚动回按钮。
https://jsfiddle.net/msfq5mx0/

$(window).scrollTo(0,$("#btnAddContent").offset().top);

【讨论】：