不斷的向下捲動出新的文章!把玩scroll的各種屬性!(30 Days challenge-20)

前言

一般來說我們從後端拿取資料時，很少會一次把整包資料整個拿出來使用，而是利用分頁的概念一次只抓幾筆資料出來。這樣的好處自然在於效能上會較為出色一些，不過相對的也有反覆戳資料庫的疑慮，如何做出取捨還是得端看設計者的想法。 今天我們就試著用HTML/CSS/JS&fetch做出各網站常見的向下捲動看更多的功能吧!

專案介紹

這是一個簡單的文章列表app，利用fetch存取jsonPlaceholder的資料後，以JS控制一次顯示的數量與監聽scroll的事件並再次發出fetch請求，原理其實相當的單純，主要重點在於利用scroll的三項屬性達到判斷使用者捲動頁面的事件。

• scrollTop，有滾動條的時候，從上方算下來的滾動距離。
• clientHeight，包含padding但不包含border的瀏覽器高度。
• scrollHeight，讓頁面上的元素可以一同呈現的最小高度(在有滾動條的情況下必定大於clientHeight)。

也就是說，今天如果我要判斷使用者是否已經捲到畫面的最下方，我的條件式就可能會類似這樣

if (scrollTop + clientHeight >= scrollHeight - 5) {
    showLoading()
  }

專案預覽

專案連結

github
demo