TL;DR
CSS overscroll-behavior
屬性可讓開發人員覆寫
瀏覽器預設溢位捲動行為時
內容。使用案例包括停用下拉即可重新整理功能
功能、移除過度捲動光暈和橡皮擦效果
並防止位於互動模式/重疊下方的網頁內容捲動
背景
捲動界線和捲動鏈結
捲動是與網頁互動的最基本方式之一 某些使用者體驗模式可能難以處理 預設行為以含有大量檔案的應用程式導覽匣為例 供使用者捲動瀏覽的項目當頁面放到底部時 溢位容器會停止捲動畫面,因為沒有其他可用的內容。 也就是說 就會到達「捲動界線」。但請注意,如果使用者繼續 請捲動頁面導覽匣「之後」的內容會開始捲動!捲動為 被父項容器接管主網頁本身
導致此行為稱為「捲動鏈結」。瀏覽器的預設值 行為預設值通常很不錯 有時候則不需要或甚至出乎意料部分應用程式可能會 當使用者到達捲動邊界時,就會提供不同的使用者體驗。
拉動即可重新整理效果
下拉即可重新整理是一種符合直覺的手勢,由行動應用程式 (例如: Facebook 和 Twitter。將社群媒體動態消息向下拉並推出新內容 空間以載入更多最近張貼的訊息。事實上,這類使用者體驗 Android 版 Chrome 等行動瀏覽器已普及 相同的效果在頁面頂端向下滑動,即可重新整理整個頁面:
以 Twitter PWA 為例
建議您停用原生的下拉即可重新整理動作這是因為在本
以避免使用者不小心重新整理網頁。還有
二是重新整理動畫的可能性!此外,
適合自訂瀏覽器的動作
讓瀏覽器更貼近
品牌不幸的是,這類自訂功能
要漂亮開發人員撰寫不必要的 JavaScript、
非被動式
觸控事件監聽器 (封鎖捲動功能) 或讓整個網頁 100vh 或 vh
<div>
(防止頁面溢位)。這些解決方法
妥善記錄負面報導
影響捲動效能
我們可以做得更好!
隆重推出 overscroll-behavior
overscroll-behavior
屬性是新的 CSS 功能,可用來控管
捲動容器時的行為 (包括
網頁本身)。您可以使用它來取消捲動鏈結、停用/自訂
提取重新整理動作,在 iOS 上停用橡皮帶效果 (Safari
實作 overscroll-behavior
) 等等。
最棒的是,使用 overscroll-behavior
不會對負面影響
網頁效能,例如簡介中提到的入侵手法!
此屬性接受三個可能的值:
- auto - 此為預設值。源自該元素的捲動可能會傳播至 祖系元素
- contain - 防止捲動鏈結。捲動不會套用到祖系
但會顯示節點中的本機效果舉例來說,過度捲動光暈
這類效果會通知使用者
當使用者達到捲動邊界時注意:使用
html
元素上的overscroll-behavior: contain
可避免過度捲動 瀏覽動作。 - none - 與
contain
相同,但也會防止內部過度捲動效果 節點本身 (例如 Android 過度捲動光暈或 iOS 橡膠頻帶)。
讓我們來看看幾個範例,瞭解如何使用 overscroll-behavior
。
禁止捲動略過固定位置元素
即時通訊方塊情境
建議你將聊天室固定在頁面底部的位置, 聊天方塊是獨立的元件,會捲動畫面 與背後的內容分開處理不過,由於捲動鏈結, 使用者點選即時通訊中的最後一則訊息時,文件就會開始捲動 。
就這個應用程式而言,建議您加入從
即時通訊方塊可以留在即時通訊中。做法是
overscroll-behavior: contain
新增至保留即時通訊訊息的元素:
#chat .msgs {
overflow: auto;
overscroll-behavior: contain;
height: 300px;
}
基本上,我們在聊天視窗的捲動頁面時,建立了邏輯區隔。 主題和主要網頁因此,當主頁放在 使用者到達即時通訊記錄的頂端/底部。從 即時通訊方塊不會傳播。
頁面重疊畫面情境
「underscroll」的另一個變化版本就是看到
捲動瀏覽到固定位置疊加層之後。致命贈品
「overscroll-behavior
」已完成排序!瀏覽器努力成為使用者的得力助手
反而會造成網站看起來有錯誤
範例 - 包含及不含 overscroll-behavior: contain
的互動視窗:
停用下拉即可重新整理功能
只有一行 CSS 可以關閉下拉即可重新整理動作。只是防止
捲動鏈結。在多數情況下
<html>
或 <body>
:
body {
/* Disables pull-to-refresh but allows overscroll glow effects. */
overscroll-behavior-y: contain;
}
我們推出這個簡單的新功能,修正了 即時通訊方塊示範,並可以 而是實作使用較差載入動畫的自訂效果。 重新整理整個收件匣時,也會同時加上模糊效果:
這個 完整程式碼:
<style>
body.refreshing #inbox {
filter: blur(1px);
touch-action: none; /* prevent scrolling */
}
body.refreshing .refresher {
transform: translate3d(0,150%,0) scale(1);
z-index: 1;
}
.refresher {
--refresh-width: 55px;
pointer-events: none;
width: var(--refresh-width);
height: var(--refresh-width);
border-radius: 50%;
position: absolute;
transition: all 300ms cubic-bezier(0,0,0.2,1);
will-change: transform, opacity;
...
}
</style>
<div class="refresher">
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
<section id="inbox"><!-- msgs --></section>
<script>
let _startY;
const inbox = document.querySelector('#inbox');
inbox.addEventListener('touchstart', e => {
_startY = e.touches[0].pageY;
}, {passive: true});
inbox.addEventListener('touchmove', e => {
const y = e.touches[0].pageY;
// Activate custom pull-to-refresh effects when at the top of the container
// and user is scrolling up.
if (document.scrollingElement.scrollTop === 0 && y > _startY &&
!document.body.classList.contains('refreshing')) {
// refresh inbox.
}
}, {passive: true});
</script>
停用過度捲動光暈和橡皮帶效果
如要在碰觸捲動邊界時停用彈跳效果,請使用
overscroll-behavior-y: none
:
body {
/* Disables pull-to-refresh and overscroll glow effect.
Still keeps swipe navigations. */
overscroll-behavior-y: none;
}
完整展示模式
總而言之
Chatbox 示範用法
overscroll-behavior
可建立自訂下拉即可重新整理動畫
並且停用捲動功能,以避開聊天方塊小工具的情況。如此一來,您就能
如果不使用 CSS,很難達成這個目標
overscroll-behavior
。