Question

如果在根据内容长度使用滚动条的元素上绑定滚动事件，则在使用不需要滚动条的新内容更新元素之前部分向下滚动时，似乎会触发滚动事件

这有点难以解释所以我把下面的例子放在一起：

var searchList = $('#search-list');
searchList.on('scroll', function() {
     console.log('scrollHandler...');   
});

$('#reload').on('click', function() {
    console.log('reloadSearchList...');

    searchList.html('Updated content.');
});

http://jsfiddle.net/ttL8W/

请按照以下步骤重现“奇怪”行为：

测试1（表现正常，与预期一样）：

请勿触摸滚动条，只需单击“重新加载按钮”即可。只会触发重新加载按钮的处理程序。

测试2（由于触发了滚动事件，表现很奇怪）：

稍微向下滚动列表。
点击“重新加载按钮”。

这是按预期工作还是错误？

Answer 1

这是因为浏览器尝试维护div的scrollTop偏移量。

如果用较短的文本替换内容（内容＆lt;父级和最大scrollTop偏移= 0） - 滚动事件将发生，因为浏览器必须滚动回0。

根据所需的结果 - 您可以忽略它（并保持scrollOffset）或在更换内容之前自行重置，例如：

$('#reload').on('click', function() {
    searchList.prop('scrollTop', 0);

    console.log('reloadSearchList...');
    searchList.html('Updated content.');
});

这仍将调用onScroll事件，但行为将保持一致。如果您不希望发生onScroll事件侦听器 - 您可以禁用它或参数化处理程序（在手动调用时不执行）。

jQuery滚动事件错误

1 个答案: