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

Question

我注意到当一些内容通过ajax推到页面顶部时，jquery的滚动事件会自动触发。 有没有专家知道如何避免在添加内容时触发滚动事件？但是当用户使用鼠标滚轮、页面向上下滚动以及键盘向上下移动时，滚动事件可能会被触发。

我发现当一些内容通过ajax推到页面顶部时，jquery的滚动事件会自动触发。请问有什么方法可以避免在添加内容时触发滚动事件吗？但是当用户使用鼠标滚轮、页面向上下滚动以及键盘向上下移动时，滚动事件仍然会被触发。

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

根据这个例子。 https://jsfiddle.net/q00jnv4n/

- Su Beng Keong

---

哪个jQuery版本？我在jQuery 2.1.3中没有看到这种行为--https://jsfiddle.net/ndnz8v79/ - Ahmad Ibrahim

jQuery 2.1.1 版本。 - Su Beng Keong

根据这个例子，看起来会在2.1.1或2.1.3版本中触发事件。https://jsfiddle.net/q00jnv4n/ - Su Beng Keong

这是因为在AddContent()函数中有一行代码 $(window).scrollTop(divHeight);。 - Ahmad Ibrahim

好的，这意味着将内容推到顶部不会触发事件，但是scrollTop将触发该事件，因此它就像一个橡皮筋。 - Su Beng Keong

@Mah Jin Khai：您能否澄清一下您的总体目标，而不仅仅是试图“防止滚动事件”？问题写得不够清晰，因为您只关注问题的一个细节。谢谢。 - iCollect.it Ltd

Answer 1

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

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

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

- Vikram

Answer 2

停止显示似乎在移动的一个选项是通过调整scrollTop来使其与#result div高度的变化量相同，例如：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/

- iCollect.it Ltd

---

这不是 OP 寻找的答案。 - Shoaib Shakeel

@Shoaib Shakeel：在这种情况下：我很高兴你理解问题（它不清楚）。也许你可以澄清一下？ - iCollect.it Ltd

当调用 $(window).scrollTop 时，会触发一个名为 'scroll' 的事件。如果用户点击了 Add Content 按钮，OP 希望抑制这个事件的触发。 - Shoaib Shakeel

@Shoaib Shakeel：听起来像是一个X-Y问题。我更愿意听到OP的整体目标，而不是他们认为自己需要的一个具体细节。我会要求他们澄清 :) - iCollect.it Ltd

谢谢大家。我已经找到了一些解决方法，稍后会发布，因为现在我有点忙。 - Su Beng Keong

Answer 3

你的代码中使用了 window.scrollTop()。由于 jQuery 在底层使用了 window.scrollTo()，因此它会自动触发滚动事件。

你无法抑制由此触发的“scroll”事件。但是，你可以使用一个技巧来检测是否在你调用了 window.scrollTop() 之后调用了滚动事件。你可以在你的 AddContent 中设置一个布尔变量为 false。然后在你的滚动事件处理程序中检查该变量是否为 false。如果是，则将其设置为 true 并不执行任何操作。否则，执行你想要的操作。

我 fork 了你的 jsfiddle 并进行了更新：JsFiddle

- Shoaib Shakeel

Answer 4

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

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

你好，提摩太斯

- Timotheus0106

Answer 5

这只是一个权宜之计，但如果您需要快速修复，您可以在新内容加载到顶部后将窗口滚动回按钮。
https://jsfiddle.net/msfq5mx0/

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

- Mike Hamilton