Question

我正在使用JQuery设计一个应用程序，用户可以在div中拖动元素，自动添加滚动条并根据需要扩展scrollHeight / scrollWidth。当更改容器div的scrollHeight和scrollWidth时，我需要触发一个偶数。

不，不想使用滚动事件，因为1）当您开始将元素拖到边缘并且scrollHeight / scrollWidth更改时，不会触发滚动。 2）当scrollHeight / scrollWidth没有改变时滚动触发。

任何提示？

Answer 1

我不推荐使用jQuery，而是there is a 'resize' dispatcher。

2017版JavaScript：

this.container = document.querySelector('#container');
this.watcher = window.requestAnimationFrame(this.watch);

this.watch = () => {
  cancelAnimationFrame(this.watcher);

  if (this.lastScrollHeight !== container.scrollHeight) {
    // do something
  }

  this.lastScrollHeight = container.scrollHeight;
  this.watcher = requestAnimationFrame(this.watch);
};

请参阅scrollHeight的文档及其与scrollTop的关系。查询scrollHeight可能会触发无效的DOM重新计算，并且使用position:absolute手动管理高度/顶部可能会更快，因为它不是margins的递归检查（对于blocks ）和其他CSS display类型。

Answer 2

我在这里回答了这个问题，这似乎无关紧要，但它确实支持scrollHeight Change和scrollWidth。

Detecting when a div's height changes using jQuery

插件：

http://www.jqui.net/jquery-projects/jquery-mutate-official/

演示：

$('.selector').mutate('scrollHeight',function (){
    alert('it has changed the scroll height do something about it...');
});

这个插件也可以跨浏览器工作，因为它使用interval（setTimeout）来检查这些更改，如果你需要它也可以扩展:)

希望它有所帮助...

是否有一个事件触发jQuery中scrollHeight或scrollWidth的更改？

2 个答案: