不斷的向下捲動出新的文章!把玩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

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s