用MutationObserver检测滚动高度变化？

Question

我怎样才能检测到 scrollHeight 在一个DOM元素上使用 MutationObserver? 它不是属性，也不是数据。

背景：我需要检测当我的内容元素上出现滚动条时，该滚动条是什么？我需要检测当滚动条出现在我的内容元素上，即 overflow-y 的值设置为自动。我想，当滚动条出现时，滚动条上的 scrollHeight 从0跳到，比如说，500，所以我们的想法是建立一个 MutationObserver 来检测这个属性的变化。

到目前为止，我已经得到了什么。

HTML

<div class="body" #body>

CSS

.body {
    overflow-y: auto;
}

TypeScript

export class MyWatchedContent implements AfterViewInit, OnDestroy {
   @ViewChild('body', { read: ElementRef })
   private body: ElementRef;

   private observer: MutationObserver;

   public ngAfterViewInit() {
       this.observer = new MutationObserver(this.observerChanges);
       this.observer.observe(this.body.nativeElement, {
           attributes: true,
       });
   }

   public ngOnDestroy() {
       this.observer.disconnect();
   }

   private observerChanges(records: MutationRecord[], observer: MutationObserver) {
       console.log('##### MUTATION');
       records.forEach((_record) => {
           console.log(_record);
       });
   }
}

例如，如果我在开发者窗口中改变背景颜色，我就可以看到观察者发射了

突变(MUTATION)

my-content-watcher.component.ts?d0f4:233 MutationRecord {type: "属性", target: div.body, addedNodes: NodeList(0), removedNodes: NodeList(0), previousSibling: null...}。

但是，如果我改变窗口大小，使滚动条出现，就不会检测到任何突变。这是否可以用 MutationObserver 如果是的话，怎么做？

Answer 1

这里是答案，对于还在寻找解决方案的人来说。

从今天开始 不能直接监控元素的滚动高度变化。.

• 该 突变观察者 检测DOM树中的变化，这可能表明滚动高度的变化，但这只是一种猜测。
• 在 调整观察者大小 检测元素外部高度的变化，而不是滚动高度（即 "内部 "高度）。
• 没有 ScrollHeight-Observer (然而)。

但解决方案是非常接近的。

解决办法

ResizeObserver检测元素外部高度的变化......

观察滚动容器是没有意义的，因为它的外高没有变化。改变其外高的元素是容器的任何CHILD节点!

一旦一个子节点的高度发生变化，就意味着父容器的scrollHeight发生了变化。

Vanilla JS版本

const container = document.querySelector('.scrollable-container');

const observer = new ResizeObserver(function() {
    console.log('New scrollHeight', container.scrollHeight);
});

// This is the critical part: We observe the size of all children!
for (var i = 0; i < container.children.length; i++) {
    observer.observe(container.children[i]);
})

jQuery版本

const container = $('.scrollable-container');

const observer = new ResizeObserver(function() {
    console.log('New scrollHeight', container[0].scrollHeight);
});

container.children().each(function(index, child) {
    observer.observe(child);
});

进一步的步骤

当动态添加子代时，你可以添加一个MutationObserver，一旦有新的子代被添加到ResizeObserver上。