js 获取滚动条滚动的距离|极客笔记

js 获取滚动条滚动的距离

在网页开发中，我们经常会遇到需要获取滚动条滚动距离的需求。比如实现页面滚动到一定距离后触发某些效果，或者在滚动过程中做一些动态调整。本文将详细介绍如何使用JavaScript获取滚动条的滚动距离。

获取滚动条滚动距离的方法

在浏览器端，我们可以通过window对象来获取滚动条的滚动距离。具体来说，有两个属性可以帮助我们实现这个功能：window.pageYOffset和window.scrollTop。

`window.pageYOffset`

window.pageYOffset是一个只读属性，返回文档在垂直方向已滚动的像素值。如果没有发生垂直滚动，那么这个属性的值为0。

const scrollY = window.pageYOffset;
console.log(scrollY);

`document.documentElement.scrollTop`

在某些浏览器中，使用document.documentElement.scrollTop也可以获取到滚动条的滚动距离。这个属性实际上是获取了<html>元素的scrollTop，所以在一些浏览器对于滚动的处理方式可能有所不同。

const scrollTop = document.documentElement.scrollTop;
console.log(scrollTop);

计算滚动距离

有时候我们也可以通过判断哪个属性有值来获取确切的滚动距离：

const scrollDistance = window.pageYOffset || document.documentElement.scrollTop;
console.log(scrollDistance);

实际应用

滚动监听

以下是一个简单的示例，当页面滚动超过200px时，改变导航栏的背景色：

<!DOCTYPE html>
<html>
<head>
  <style>
    #navbar {
      background-color: transparent;
      transition: background-color 0.5s;
    }
  </style>
</head>
<body>
  <nav id="navbar">Navbar</nav>

  <script>
    window.onscroll = function() {
      const navbar = document.getElementById('navbar');
      if (window.pageYOffset > 200) {
        navbar.style.backgroundColor = 'gray';
      } else {
        navbar.style.backgroundColor = 'transparent';
      }
    }
  </script>
</body>
</html>

在这个示例中，我们通过监听window的滚动事件，实时获取滚动距离并根据需要改变导航栏的背景色。

懒加载

另一个常见的应用是实现图片的懒加载。当用户滚动页面时，根据滚动距离加载可视区域内的图片，提升页面加载速度和用户体验。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      height: 2000px;
    }

    .lazy-image {
      width: 200px;
      height: 200px;
      background-color: lightgray;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="lazy-image" data-src="image1.jpg"></div>
    <div class="lazy-image" data-src="image2.jpg"></div>
    <div class="lazy-image" data-src="image3.jpg"></div>
    <!-- more lazy images -->
  </div>

  <script>
    const lazyImages = document.querySelectorAll('.lazy-image');

    function lazyLoad() {
      lazyImages.forEach(image => {
        if (image.getBoundingClientRect().top < window.innerHeight && image.dataset.src) {
          image.style.backgroundImage = `url(${image.dataset.src})`;
          image.removeAttribute('data-src');
        }
      });
    }

    window.addEventListener('scroll', lazyLoad);
    lazyLoad(); // 初始化页面时加载一次
  </script>
</body>
</html>

在这个示例中，我们使用getBoundingClientRect()方法来获取元素相对于视窗的位置，根据滚动距离实现图片的懒加载效果。