Question

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

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

基于这个例子。 https://jsfiddle.net/q00jnv4n/

Answer 1

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

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

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

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/

Answer 3

您在代码中使用window.scrollTop()。当jQuery使用jQuery时，它会自动触发window.scrollTo()中的滚动事件。

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

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

Answer 4

参考this帖子，只有一个事件只能听鼠标滚动。

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

问候timotheus

Answer 5

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

$this->app

阻止内容在顶部推送时触发滚动事件

5 个答案: