jQuery滚动事件错误

如果您在一个元素上绑定了一个滚动事件，该元素根据内容的长度使用滚动条，那么如果您在使用不需要滚动条的新内容更新该元素之前部分向下滚动，则可能会触发滚动事件

这有点难以解释，因此我将以下示例放在一起：

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

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

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

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

测试1（表现正常，如预期）：

• 不要触摸滚动条，只需单击“重新加载按钮”。只有重载按钮的处理程序将被触发

测试2（由于触发了滚动事件，因此行为异常）：

• 将列表向下滚动一点
• 单击“重新加载按钮”

---

这是正常工作还是一个bug？

这是因为浏览器试图保持div的

滚动顶偏移量

如果将内容替换为较短的文本（contentscrollTop

offset=0），则当浏览器必须回滚到0时，将发生滚动事件

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

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

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

这仍将调用

onScroll

事件，但行为将保持一致。

---

如果不希望出现

onScroll

事件侦听器，可以禁用它或参数化处理程序（手动调用时不执行）。

当滚动条消失时，滚动事件似乎会再次触发。例如，如果您附加了更多的

li

，并且滚动条仍然存在，则事件不会触发。我想避免触发的一种方法是在操作元素之前删除滚动事件，然后重新绑定事件。