如何获取可滚动div的当前滚动位置？图片懒加载适配div场景求助

没问题，我帮你把原本基于浏览器窗口的懒加载逻辑，调整为适配嵌套滚动div的版本！核心就是把监听对象从window换成你的画廊容器div，同时重新计算元素是否处于容器的可视区域内。

步骤1：标记你的画廊容器 #

首先给嵌套的滚动div加一个唯一的选择器（比如类名gallery-container），方便获取元素：

<div class="gallery-container">
  <!-- 你的图片列表 -->
  <img class="progressive replace" data-src="xxx.jpg" src="placeholder.jpg">
  ...
</div>

步骤2：修改滚动监听与可视区域判断逻辑 #

把你现有的代码调整成下面这样，我会标注关键改动点：

// 获取画廊容器
const galleryContainer = document.querySelector('.gallery-container');
// 获取所有需要懒加载的图片
const pItems = document.getElementsByClassName('progressive replace');

// 懒加载判断函数
function checkLazyLoad() {
  // 获取容器的视口边界信息
  const containerRect = galleryContainer.getBoundingClientRect();
  const containerViewTop = containerRect.top;
  const containerViewBottom = containerRect.bottom;
  // 可选：提前加载的偏移量（比如提前100px加载）
  const preloadOffset = 100;

  for (let i = 0; i < pItems.length; i++) {
    const item = pItems[i];
    const itemRect = item.getBoundingClientRect();
    
    // 判断图片是否进入容器的可视区域（含提前加载偏移）
    const isInView = (
      itemRect.top - preloadOffset < containerViewBottom &&
      itemRect.bottom + preloadOffset > containerViewTop &&
      !item.classList.contains('loaded') // 避免重复加载
    );

    if (isInView) {
      // 替换真实图片地址
      item.src = item.dataset.src;
      item.classList.add('loaded');
    }
  }
}

// 监听容器的滚动事件
galleryContainer.addEventListener('scroll', checkLazyLoad);
// 页面加载时先执行一次，加载初始可见的图片
window.addEventListener('load', checkLazyLoad);
// 可选：监听容器大小变化，避免窗口 resize 后可视区域判断出错
window.addEventListener('resize', checkLazyLoad);

关键改动说明 #

• 监听对象替换：从监听window的scroll事件，改成监听目标容器的scroll事件，这样只有容器滚动时才触发判断。
• 可视区域计算：不再用window.innerHeight和window.scrollY，而是通过getBoundingClientRect()获取容器和图片相对于浏览器视口的位置，进而判断图片是否处于容器的可见范围内。
• 避免重复加载：给已加载的图片添加loaded类，跳过后续判断，提升性能。

额外优化建议 #

如果图片数量很多，可以用IntersectionObserver API来实现懒加载，代码更简洁且性能更好，同样支持嵌套容器的场景：

const galleryContainer = document.querySelector('.gallery-container');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.add('loaded');
      observer.unobserve(img);
    }
  });
}, {
  root: galleryContainer, // 指定监听的根容器
  rootMargin: '100px' // 提前加载的偏移量
});

// 给所有图片添加监听
document.querySelectorAll('.progressive.replace').forEach(img => {
  observer.observe(img);
});

这个API是浏览器原生支持的，不需要手动处理滚动事件和位置计算，推荐使用！

内容的提问来源于stack exchange，提问作者J.Swinkels