如何在ResizeObserver中获取Telegram网页联系人列表的scrollHeight新值

这是我的HTML代码：

<div class="scrollable scrollable-y" id="scroll">
<ul class="chatlist contacts-container" id="contacts" data-autonomous="1">
  <a class="chatlist-chat rp" data-peer-id="100201777">
  <a class="chatlist-chat rp" data-peer-id="100201778">
  <a class="chatlist-chat rp" data-peer-id="100201779">
</ul>
<div>

id为“scroll”的div是可滚动容器，属于Telegram网页版联系人模块。每个<a>元素代表一个联系人，滚动该div时会从服务器动态加载更多<a>元素。我使用以下脚本时发现，ul子元素的scrollHeight（滚动容器的scrollHeight）会增加：

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

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

我的问题是：如何获取scrollHeight的新值？希望有类似如下的调用方式：

observer.container[0].scrollHeight.get();

你不需要通过observer对象直接获取scrollHeight，ResizeObserver的回调本身就是在元素尺寸变化（包括子元素新增导致scrollHeight变化）时触发的，你可以在回调里直接读取并存储最新值，或者封装成符合你需求的调用形式：

• 直接存储最新值
  定义变量保存最新的scrollHeight，回调中更新它，后续随时可以调用这个变量获取值：

const container = $("#scroll");
let latestScrollHeight = container[0].scrollHeight; // 初始化初始值

const observer = new ResizeObserver(() => {
  latestScrollHeight = container[0].scrollHeight;
  console.log('更新后的scrollHeight', latestScrollHeight);
});

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

// 需要获取新值时直接调用变量
// console.log(latestScrollHeight);

• 封装成自定义调用方法
  如果想要接近你期望的调用形式，可以把逻辑封装成一个自执行对象：

const scrollHeightTracker = (function() {
  const container = $("#scroll")[0];
  let latestScrollHeight = container.scrollHeight;
  
  const observer = new ResizeObserver(() => {
    latestScrollHeight = container.scrollHeight;
  });
  
  // 监听容器下的子元素
  Array.from(container.children).forEach(child => {
    observer.observe(child);
  });
  
  return {
    getScrollHeight: () => latestScrollHeight
  };
})();

// 调用方式，和你期望的形式类似
// console.log(scrollHeightTracker.getScrollHeight());

• 优化方案：直接监听容器本身
  其实无需逐个监听子元素，直接监听#scroll容器即可——子元素新增会导致容器的scrollHeight变化，ResizeObserver同样能捕捉到这种变化：

const container = $("#scroll")[0];
let latestScrollHeight = container.scrollHeight;

const observer = new ResizeObserver(() => {
  latestScrollHeight = container.scrollHeight;
  console.log('新的scrollHeight', latestScrollHeight);
});

// 指定监听内容盒尺寸变化
observer.observe(container, { box: 'content-box' });

// 获取值直接调用 latestScrollHeight

内容的提问来源于stack exchange，提问作者KnowledgeLover