懒加载图片导致scrollIntoView滚动目标区块位置异常的解决问询

这是因为懒加载图片未加载时，浏览器无法获取图片真实尺寸，导致目标区块的整体高度计算偏差，滚动位置自然就错了。给你几个可行的修复方法：

1. 提前加载目标区域的图片 #

点击滚动按钮时，先触发目标区块内所有懒加载图片的加载，等图片全部加载完成后再执行滚动：

const scrollBtn = document.querySelector('#scroll-btn');
const targetSection = document.querySelector('#target-section');

scrollBtn.addEventListener('click', async () => {
  // 抓取目标区域里的懒加载图片
  const lazyImgs = targetSection.querySelectorAll('img[loading="lazy"]');
  
  // 移除懒加载属性，让浏览器立刻加载图片
  lazyImgs.forEach(img => img.removeAttribute('loading'));

  // 等待所有图片加载完成
  await Promise.all(Array.from(lazyImgs).map(img => {
    if (img.complete) return Promise.resolve();
    return new Promise(resolve => img.onload = resolve);
  }));

  // 现在滚动位置就准确了
  targetSection.scrollIntoView({ behavior: 'smooth' });
});

2. 给图片预留固定尺寸 #

直接给图片设置明确的宽高属性，或者用CSS设置宽高比，让浏览器在图片加载前就能算出正确的占位空间：

• HTML写法：

<img src="source_img" alt="img_alt" loading="lazy" width="800" height="600"/>

• CSS宽高比写法（更适配响应式）：

.img-wrap {
  width: 100%;
  aspect-ratio: 16/9; /* 替换成你的图片实际比例 */
}
.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

3. 图片加载后重新校正滚动 #

如果不想提前加载图片，可以在滚动后监听图片加载事件，加载完成后再重新滚动一次修正位置：

const scrollBtn = document.querySelector('#scroll-btn');
const targetSection = document.querySelector('#target-section');

scrollBtn.addEventListener('click', () => {
  // 先执行一次滚动
  targetSection.scrollIntoView({ behavior: 'smooth' });
  
  // 监听目标区域内懒加载图片的加载事件
  const lazyImgs = targetSection.querySelectorAll('img[loading="lazy"]');
  lazyImgs.forEach(img => {
    img.addEventListener('load', () => {
      // 图片加载完后立刻校正滚动位置
      targetSection.scrollIntoView({ behavior: 'instant' });
    }, { once: true }); // 只触发一次监听
  });
});

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