JavaScript获取页面滚动位置与滚动事件监听实战

// 获取垂直滚动位置
let verticalScroll = window.scrollY || window.pageYOffset;

// 获取水平滚动位置
let horizontalScroll = window.scrollX || window.pageXOffset;

console.log("垂直滚动位置:", verticalScroll);
console.log("水平滚动位置:", horizontalScroll);

<div id="scrollContainer" style="width: 200px; height: 200px; overflow: auto;">
  <div style="height: 600px; width: 600px;">长内容</div>
</div>

<script>
  // 获取滚动容器
  let scrollContainer = document.getElementById('scrollContainer');

  // 获取该容器的滚动位置
  let containerScrollTop = scrollContainer.scrollTop;
  let containerScrollLeft = scrollContainer.scrollLeft;

  console.log("滚动容器的垂直滚动位置:", containerScrollTop);
  console.log("滚动容器的水平滚动位置:", containerScrollLeft);
</script>

window.addEventListener('scroll', function() {
  let verticalScroll = window.scrollY || window.pageYOffset;
  let horizontalScroll = window.scrollX || window.pageXOffset;

  console.log("页面的垂直滚动位置:", verticalScroll);
  console.log("页面的水平滚动位置:", horizontalScroll);
});

<div class="image-container">
  <img data-src="image1.jpg" class="lazy-load" alt="image1" />
  <img data-src="image2.jpg" class="lazy-load" alt="image2" />
  <img data-src="image3.jpg" class="lazy-load" alt="image3" />
</div>

<script>
  function lazyLoadImages() {
    let images = document.querySelectorAll('.lazy-load');
    let windowHeight = window.innerHeight;
    let windowScrollTop = window.scrollY || window.pageYOffset;

    images.forEach(function(img) {
      // 获取图片相对于页面的顶部位置
      let imageTop = img.getBoundingClientRect().top + windowScrollTop;

      // 如果图片进入视口，则加载图片
      if (imageTop <= windowScrollTop + windowHeight) {
        img.src = img.dataset.src;  // 设置图片的 src 属性，触发加载
        img.classList.remove('lazy-load');  // 移除懒加载类
      }
    });
  }

  // 监听滚动事件和页面加载时执行
  window.addEventListener('scroll', lazyLoadImages);
  window.addEventListener('load', lazyLoadImages);  // 页面加载时也检查一次
</script>

<button id="scrollButton">滚动到顶部</button>

<script>
  // 获取按钮
  let scrollButton = document.getElementById('scrollButton');

  // 点击按钮时，平滑滚动到页面顶部
  scrollButton.addEventListener('click', function() {
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: 'smooth'  // 设置平滑滚动
    });
  });
</script>

<div id="contentContainer">
  <!-- 初始内容 -->
</div>

<script>
  let contentContainer = document.getElementById('contentContainer');

  window.addEventListener('scroll', function() {
    let documentHeight = document.documentElement.scrollHeight;  // 文档总高度
    let windowHeight = window.innerHeight;  // 浏览器视口高度
    let scrollPosition = window.scrollY || window.pageYOffset;  // 当前滚动位置

    // 如果用户滚动到页面底部
    if (scrollPosition + windowHeight >= documentHeight - 100) {
      // 加载更多内容
      let newContent = document.createElement('div');
      newContent.textContent = '加载更多的内容...';
      contentContainer.appendChild(newContent);
    }
  });
</script>