頁面滾動偵聽器

zhangbao90s發表於2018-01-23

頁面滾動偵聽器，就是在頁面頂部，隨著使用者縱向滾動頁面，實時反應滾動進度的元素。

頁面滾動偵聽器

實現起來也不難，核心思想是：頁面滾動距離（window.pageYOffset）除以可以滾動的有效高度得到的百分比，就是滾動進度了。

HTML 結構

<div class="progress-indicator" style="width:0;"></div>

<div class="container">
    <div class="header mb-3"></div>
    <div class="content mb-3"></div>
    <div class="footer"></div>
</div>
複製程式碼

progress-indicator 就是偵聽元素了，初始寬度是 0。

.progress-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #3273dc;
}
複製程式碼

下面為 .container 部分新增樣式。

.mb-3 {
    margin-bottom: 1rem;
}

.container {
    max-width: 480px;
    margin: 0 auto;
}

.header {
    height: 60px;
    background: skyblue;
}

.content {
    height: 2000px;
    background: lightgray;
}

.footer {
    height: 45px;
    background: #ebebeb;
}
複製程式碼

我們要檢測的滾動元素是 .content，它有 2000px 高。

下面為 window 新增監聽事件 scroll，實現實時監聽邏輯。

JavaScript

window.addEventListener('load', function () {
  var article = document.querySelector('.content');
  var prog = document.querySelector('.progress-indicator');

  var initialTop = getOffsetTop(article);
  var articleHeight = article.getBoundingClientRect().height;
  var viewportHeight = document.documentElement.clientHeight;

  var totalScrollHeight = (initialTop + articleHeight) - viewportHeight;

  scrollHandler();
  window.addEventListener('scroll', function () {
    scrollHandler();
  });

  function scrollHandler() {
    window.requestAnimationFrame(function () {
      var perc = Math.min(1, window.pageYOffset / totalScrollHeight);
      updateProgress(perc);
    });

    function updateProgress(perc) {
      prog.style.width = perc * 100 + '%';
    }
  }

  // Util Tool
  function getOffsetTop(elem) {
    var top = 0;

    while (elem.offsetParent) {
      top += elem.offsetTop;
      elem = elem.offsetParent;
    }

    return top;
  }
});
複製程式碼

（完）

相關文章