h5动态增加元素后使用scrollTo无法滚动到底部

H5页面中动态添加元素后，如果直接使用JavaScript的`scrollTo`方法将视口滚动到新添加元素的底部，可能会遇到滚动不到预期位置的问题。这是因为`scrollTo`方法会在文档加载完毕之前执行，而此时新添加的元素可能还未渲染完成，所以不会立即生效。

解决这个问题通常需要结合`MutationObserver`或`Intersection Observer`（后者更现代且推荐），这两个API可以让你观察DOM的变化，当新元素插入并达到可视区域时再触发滚动。这里是简单的步骤：

1. 使用`append`, `insertBefore`等方法动态添加元素。
2. 创建一个观察者，监听`childList`事件，表示有新的子节点被添加或移除。
3. 在观察回调函数中，检查新元素是否达到了可视区域，如果是，则滚动到该元素。
4. 可能还需要处理一些边缘情况，比如元素刚刚添加可能距离底部还有一定距离。

示例代码：

let observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length) {
      mutation.addedNodes.forEach((node) => {
        const isBottomReached = node === document.body.lastChild || node.offsetTop + node.offsetHeight >= window.innerHeight;
        if (isBottomReached) {
          window.scrollTo({
            top: node.offsetTop + node.offsetHeight - window.innerHeight,
            behavior: 'smooth' // 为了平滑滚动效果
          });
        }
      });
    }
  });
});

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