延迟加载与 ScrollTo 锚点到 ID 滚动冲突 - 在页面中途停止

Question

我的页面上有一个 scrollTo 功能，当您单击特定按钮时，您会滚动到具有唯一 ID 的部分。

问题是我在我的网站上对图像使用延迟加载，因此，由于图像是延迟加载的，这将导致 ScrollTo 在页面中途停止。

毕竟，图片加载完毕，我再次点击按钮，效果很好。

我的懒加载代码：

(() => {
    const runLazy = () => {
        let images = [...document.querySelectorAll('[data-lazy]')];

        const settings = {
            rootMargin: '0px',
            threshold: 0.02
        };

        let observer = new IntersectionObserver((imageEntites) => {
            imageEntites.forEach((image) => {
                if (image.isIntersecting) {
                    observer.unobserve(image.target);
                    image.target.src = image.target.dataset.lazy;
                    image.target.onload = () =>
                        image.target.classList.add('loaded');
                }
            });
        }, settings);

        images.forEach((image) => observer.observe(image));
    };

    runLazy();

})();

我滚动到代码：

(() => {
    document.querySelectorAll('a[href^="#"]').forEach((elem) => {
        elem.addEventListener('click', (e) => {
            e.preventDefault();
            let block = document.querySelector(elem.getAttribute('href')),
                offset = elem.dataset.offset
                    ? parseInt(elem.dataset.offset)
                    : 0,
                bodyOffset = document.body.getBoundingClientRect().top;
            window.scrollTo({
                top: block.getBoundingClientRect().top - bodyOffset + offset,
                behavior: 'smooth'
            });
        });
    });
})();

有办法解决这个问题吗？

Answer 1

这好像是懒加载时图片大小变化事件引起的

所以你可以只设置固定 height 和 width 到延迟加载图像，以跳过这个问题。

Edit:

由于固定的图片尺寸不合适，你可以用location.href = '#your-image-tag'，加上image.onload事件中的window.scrollBy来解决这个问题。

关键代码：

(() => {
  document.querySelectorAll('a[href^="#"]').forEach((elem) => {
      elem.addEventListener('click', (e) => {
          e.preventDefault();
          location.href = elem.getAttribute('href')
      });
  });
})()

image.target.onload = () => {
  image.target.classList.add("loaded");

  // TODO: check current image below or upper the target image
  window.scrollBy(0, image.target.clientHeight)
  // or window.scrollBy(0, 0 - image.target.clientHeight)
}

现场演示：https://codesandbox.io/s/focused-field-2q3py?file=/src/index.js

Answer 2

我尝试了所有解决方案，但这对我来说更好：

element.scrollIntoView({
     block: 'start',
     behavior: "smooth"
});

延迟加载与 ScrollTo 锚点到 ID 滚动冲突 - 在页面中途停止

Lazy loading conflicting with ScrollTo anchor to ID scroll - Stops halfway through the page

javascript

js-scrollto