// 獲取垂直滾動(dòng)位置
let verticalScroll = window.scrollY || window.pageYOffset;

// 獲取水平滾動(dòng)位置
let horizontalScroll = window.scrollX || window.pageXOffset;

console.log("垂直滾動(dòng)位置:", verticalScroll);
console.log("水平滾動(dòng)位置:", horizontalScroll);

<div id="scrollContainer" style="width: 200px; height: 200px; overflow: auto;">
  <div style="height: 600px; width: 600px;">長(zhǎng)內(nèi)容</div>
</div>

<script>
  // 獲取滾動(dòng)容器
  let scrollContainer = document.getElementById('scrollContainer');

  // 獲取該容器的滾動(dòng)位置
  let containerScrollTop = scrollContainer.scrollTop;
  let containerScrollLeft = scrollContainer.scrollLeft;

  console.log("滾動(dòng)容器的垂直滾動(dòng)位置:", containerScrollTop);
  console.log("滾動(dòng)容器的水平滾動(dòng)位置:", containerScrollLeft);
</script>

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

  console.log("頁(yè)面的垂直滾動(dòng)位置:", verticalScroll);
  console.log("頁(yè)面的水平滾動(dòng)位置:", 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) {
      // 獲取圖片相對(duì)于頁(yè)面的頂部位置
      let imageTop = img.getBoundingClientRect().top + windowScrollTop;

      // 如果圖片進(jìn)入視口，則加載圖片
      if (imageTop <= windowScrollTop + windowHeight) {
        img.src = img.dataset.src;  // 設(shè)置圖片的 src 屬性，觸發(fā)加載
        img.classList.remove('lazy-load');  // 移除懶加載類(lèi)
      }
    });
  }

  // 監(jiān)聽(tīng)滾動(dòng)事件和頁(yè)面加載時(shí)執(zhí)行
  window.addEventListener('scroll', lazyLoadImages);
  window.addEventListener('load', lazyLoadImages);  // 頁(yè)面加載時(shí)也檢查一次
</script>

<button id="scrollButton">滾動(dòng)到頂部</button>

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

  // 點(diǎn)擊按鈕時(shí)，平滑滾動(dòng)到頁(yè)面頂部
  scrollButton.addEventListener('click', function() {
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: 'smooth'  // 設(shè)置平滑滾動(dòng)
    });
  });
</script>

<div id="contentContainer">
  <!-- 初始內(nèi)容 -->
</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;  // 當(dāng)前滾動(dòng)位置

    // 如果用戶滾動(dòng)到頁(yè)面底部
    if (scrollPosition + windowHeight >= documentHeight - 100) {
      // 加載更多內(nèi)容
      let newContent = document.createElement('div');
      newContent.textContent = '加載更多的內(nèi)容...';
      contentContainer.appendChild(newContent);
    }
  });
</script>