收听文档高度变化 - Javascript

本文介绍如何使用JavaScript监听文档高度的变化。

方法一：使用scroll事件

可以通过监听scroll事件来获取文档高度的变化。

window.addEventListener('scroll', function() {
  var documentHeight = Math.max(
    document.body.scrollHeight, document.documentElement.scrollHeight,
    document.body.offsetHeight, document.documentElement.offsetHeight,
    document.body.clientHeight, document.documentElement.clientHeight
  );
  
  console.log('文档高度：', documentHeight);
});

这里使用window.addEventListener来添加scroll事件的监听器。在每次滚动时，通过document对象的不同属性（scrollHeight、offsetHeight和clientHeight）获取文档的高度，并选择其中的最大值作为文档高度。

方法二：使用MutationObserver监测DOM变化

除了scroll事件，还可以使用MutationObserver监测DOM的变化。

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === 'childList' || mutation.type === 'subtree') {
      // DOM发生变化时的处理逻辑
      var documentHeight = Math.max(
        document.body.scrollHeight, document.documentElement.scrollHeight,
        document.body.offsetHeight, document.documentElement.offsetHeight,
        document.body.clientHeight, document.documentElement.clientHeight
      );
      
      console.log('文档高度：', documentHeight);
    }
  });
});

observer.observe(document, {
  childList: true,
  subtree: true
});

这里创建了一个MutationObserver实例，通过传入一个回调函数来处理DOM发生变化的情况。在回调函数中，判断mutation.type为childList或subtree时，表示DOM发生了变化。然后可以通过之前介绍的方法来获取文档高度。

总结

通过scroll事件或MutationObserver可以方便地监听文档高度的变化。根据需求选择合适的方法，以实现对文档高度的监测与处理。