CSS scroll() 與 view() 教學：滾動進度和元素進場，如何交給 AI 正確製作
CSS scroll() 與 view() 教學。「滑到這裡才動」可能指兩種需求：整篇文章滑到一半，進度條也到一半；或某張圖片進入畫面時，開始自己的變化。兩者都跟捲動有關，計算依據卻不同。
「滑到這裡才動」可能指兩種需求：整篇文章滑到一半，進度條也到一半，或某張圖片進入畫面時，開始自己的變化。兩者都跟捲動有關，計算依據卻不同。
CSS 的 scroll() 與 view() 分別提供這兩種動畫時間軸。CSS 是描述網頁外觀的語言，時間軸在這裡決定動畫進行到哪一格。
如果正在請 AI 做網站動態，我建議先寫清楚動畫跟誰的進度走，再補範圍和替代顯示，較容易得到可驗收的結果。
scroll() 和 view() 差在哪？
MDN 的 scroll() 文件 以捲動容器的進度控制動畫。例如頁面從頂部滑到底部，閱讀進度條也從零到滿。
view() 文件 則以特定元素進入與離開可視範圍的進度控制。圖片和文字卡片都可以各自有自己的進場範圍。
所以先問「是整頁進度，還是這個元素的位置」。選對依據之後，再決定水平或垂直方向、開始與結束點。
可以怎麼交給 AI 製作？
以下是需求範例，數值應依你的內容調整：
閱讀進度條跟整個頁面的垂直捲動進度同步。內文圖片則用 view()，在進入畫面後逐漸顯示。內容預設可見，瀏覽器不支援或使用者偏好降低動態時，保持直接顯示。
如果程式有使用 animation 簡寫，還要留意它會重設部分屬性，因此 animation-timeline 的宣告順序需要正確。這種細節可以請 AI 對照 MDN 再檢查。
完成後先慢慢滑，再快速滑、往回滑。動畫應該跟指定進度對應，而不是只有第一次載入看起來正確。
瀏覽器支援怎麼確認？
2026 年 11 月 11 日讀取的 MDN 頁面，把兩項功能列為 Baseline 2026，說明自十月起涵蓋最新主流瀏覽器。舊裝置與舊版本仍可能不支援，因此不能省略替代顯示。
Baseline 是描述跨主流瀏覽器支援狀態的參考，不代表所有現有裝置都已更新。實際交付時，仍要依使用者常見版本測試。
特別留意預設透明的內容。如果動畫沒有啟動，而文字也一直透明，讀者可能整段看不到，先讓內容可讀，再以功能支援條件加動畫，會比較穩妥。
常見問題
scroll() 一定跟整個頁面走嗎？
可以指定不同捲動容器，預設也未必就是整頁，因此需求和程式都應確認對象。
view() 等於滑到就播放一次嗎？
它是依可視範圍進度變化的時間軸。只播放一次是另外的行為要求，不能直接畫等號。
加越多捲動動畫越有質感嗎？
動作應幫助理解與層級。先做好一個有用途的變化，再看是否需要擴充。
先把「跟著哪個進度」說清楚
用整頁進度或元素進場擇一做小測試，補上不支援時的畫面，再於手機與桌面往返捲動。動畫的用途和完成條件就會一起清楚。
