JS获取滚动位置方法与实战教程

function getScrollTop() {
  return window.scrollY ||
         document.documentElement.scrollTop ||
         document.body.scrollTop || 0;
}

function getScrollLeft() {
  return window.scrollX ||
         document.documentElement.scrollLeft ||
         document.body.scrollLeft || 0;
}

window.addEventListener('scroll', function() {
  const scrollTop = getScrollTop();
  console.log('当前滚动位置:', scrollTop);
if (scrollTop > 300) {
// 滚动超过300px时显示“回到顶部”按钮
document.getElementById('backToTop').style.display = 'block';
} else {
document.getElementById('backToTop').style.display = 'none';
}
});

function isScrolledToBottom() {
  const scrollTop = getScrollTop();
  const windowHeight = window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;
return scrollTop + windowHeight >= documentHeight - 5; // 允许5px误差
}
window.addEventListener('scroll', function() {
if (isScrolledToBottom()) {
console.log('已滚动到底部，可加载更多内容');
// 加载更多数据逻辑
}
});