資訊專欄INFORMATION COLUMN
摘要：否則會出現兩個下拉刷新之前之后禁用炫光和回彈效果將屬性制定為，可以禁用默認的滾動邊界效果。完整的地址源碼最終效果閱讀原文討論地址使用控制滾動行為自定義下拉刷新和溢出效果如果你想參與討論，請點擊這里
dev-reading/fe 是一個閱讀、導讀、速讀的 repo，不要依賴于 dev-reading/fe 學習知識。本 repo 只是一個快速了解文章內容的工具，并不提供全文解讀和翻譯。你可以通過本平臺快速了解文章里面的內容，找到感興趣的文章，然后去閱讀全文。
本文地址：https://github.com/dev-readin...
閱讀時間大概 3 分鐘
CSS 的新屬性 overscroll-behavior 允許開發者覆蓋默認的瀏覽器滾動行為，一般用在滾動到頂部或者底部。
背景 滾動邊界和滾動鏈接（boundary & chaining）在 APP 中經常使用的抽屜導航(drawer)中，我們期望的效果是：滾動到底部時，滾動停止，因為我們到達了"滾動邊界"。
但是在 Web 頁面中滾動并不會停止，而是繼續滾動抽屜后面的內容。效果如下：
我們稱這種行為叫滾動鏈接（scroll chaining）。
下拉刷新 pull-to-refresh下拉刷新是一個在移動端經常使用的操作，Chrome 移動版也增加了下拉刷新的支持。
Twitter PWA 版本的自定義下拉刷新：
Chrome Android 版的原生下拉刷新（刷新整個頁面）：
很多時候我們需要禁用原生的 pull-to-refresh 行為。
以前我們想出各種方式來處理滾動，比如：不讓頁面滾動，而是使用 touch 事件處理滾動行為，使用 100vw/vh 設置頁面高度禁止內容溢出或滾動，等等。。。
現在我們可以使用 overscroll-behavior。
介紹 overscroll-behavioroverscroll-behavior 屬性有 3 個值：
auto - 默認。元素的滾動會傳播給祖先元素。
contain - 阻止滾動鏈接。滾動不會傳播給祖先，但會顯示元素內的原生效果。例如，Android 上的炫光效果或 iOS 上的回彈效果，當用戶觸摸滾動邊界時會通知用戶。注意：overscroll-behavior: contain 在 html 元素上使用可防止滾動導航操作。
none - 和 contain 一樣，但它也可以防止節點本身的滾動效果（例如 Android 炫光或 iOS 回彈）。
阻止 fixed 定位元素的滾動傳播當一個 fixed 定位元素滾動到邊界時，會滾動元素后面的內容。如下：
我們可以使用 overscroll-behavior: contain 阻止這種行為。
如果我們有一個 fixed 定位的彈出層需要滾動時，默認是這樣的，如下：
使用 overscroll-behavior: contain 可以阻止滾動傳播給父元素，如下：
禁用下拉刷新 pull-to-refresh禁用原生的下拉刷新效果，只需要在 body 或 html 元素添加：
body {
/* Disables pull-to-refresh but allows overscroll glow effects. */
overscroll-behavior-y: contain;
}
當我們阻止了原生的下拉刷新后，就可以實現自己定義的下拉刷新。否則會出現兩個下拉刷新：
之前：
之后：
禁用炫光和回彈效果將屬性制定為 none，可以禁用默認的滾動邊界效果。
body {
/* 禁用默認的下拉刷新和邊界效果
但是依然可以進行滑動導航 */
overscroll-behavior-y: none;
}
之前:
之后：
如果想禁用左右滑動的手勢導航，可以使用 overscroll-behavior-x: none。
完整的 demoDemo 地址：https://ebidel.github.io/demo...
源碼：https://github.com/ebidel/dem...
最終效果：
閱讀原文：Take control of your scroll: customizing pull-to-refresh and overflow effects
討論地址：使用 CSS overscroll-behavior 控制滾動行為：自定義下拉刷新和溢出效果
如果你想參與討論，請點擊這里
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112733.html
摘要：否則會出現兩個下拉刷新之前之后禁用炫光和回彈效果將屬性制定為，可以禁用默認的滾動邊界效果。完整的地址源碼最終效果閱讀原文討論地址使用控制滾動行為自定義下拉刷新和溢出效果如果你想參與討論，請點擊這里 dev-reading/fe 是一個閱讀、導讀、速讀的 repo，不要依賴于 dev-reading/fe 學習知識。本 repo 只是一個快速了解文章內容的工具，并不提供全文解讀和翻譯。你...
摘要：否則會出現兩個下拉刷新之前之后禁用炫光和回彈效果將屬性制定為，可以禁用默認的滾動邊界效果。完整的地址源碼最終效果閱讀原文討論地址使用控制滾動行為自定義下拉刷新和溢出效果如果你想參與討論，請點擊這里 dev-reading/fe 是一個閱讀、導讀、速讀的 repo，不要依賴于 dev-reading/fe 學習知識。本 repo 只是一個快速了解文章內容的工具，并不提供全文解讀和翻譯。你...
摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現出多種樣式。可以讓屬性的變化過程持續一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...
閱讀 3045·2021-10-12 10:12
閱讀 5349·2021-09-26 10:20
閱讀 1515·2021-07-26 23:38
閱讀 2806·2019-08-30 15:54
閱讀 1636·2019-08-30 13:45
閱讀 1953·2019-08-30 11:23
閱讀 3078·2019-08-29 13:49
閱讀 819·2019-08-26 18:23
