0

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

这有点难以解释，所以我整理了以下示例：

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（表现奇怪，因为触发了滚动事件）：

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

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

4

1 回答 1

0

发生这种情况是因为浏览器试图保持scrollTopdiv 的偏移量。

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

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

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

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

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

于 2013-06-14T09:24:46.800 回答