滚动至页面上的延迟加载锚点

Question

我目前正在使用“＃”单击锚点进行平滑滚动。

我的代码当前如下所示：

(function() {
  let getElementOffset = (el) => {
      const rect = el.getBoundingClientRect();

      return {
          top: rect.top + window.pageYOffset,
          left: rect.left + window.pageXOffset,
      };
  };
  let anchors = document.getElementsByClassName('js-scroll');
  Array.from(anchors).map(function(anchor) {
      anchor.addEventListener('click', function(event) {
          event.preventDefault();
          history.pushState({}, "", this.getAttribute('href'));
          window.scrollTo({ top: getElementOffset(document.getElementById(this.getAttribute('href').substr(1))).top, behavior: 'smooth' });
      });
  });
            })();

<a class="js-scroll" href="#buy">Buy</a>
<img class="lazy" data-src="path/to/image" src="placholder.png" />
<div id="buy">
  content to scoll to
</div>

在没有延迟加载图像或已加载图像的页面上，滚动效果非常好。

我知道问题出在哪里：在单击锚点时，滚动位置与滚动时不同。目前，我通过延迟加载来加载图像，并通过x-cord来滚动以更改图像。

如何检测到要滚动到的新右侧x-cord？