成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用 CSS overscroll-behavior 控制滾動(dòng)行為：自定義下拉刷新和溢出效果

jhhfft / 925人閱讀

摘要：否則會(huì)出現(xiàn)兩個(gè)下拉刷新之前之后禁用炫光和回彈效果將屬性制定為，可以禁用默認(rèn)的滾動(dòng)邊界效果。完整的地址源碼最終效果閱讀原文討論地址使用控制滾動(dòng)行為自定義下拉刷新和溢出效果如果你想?yún)⑴c討論，請(qǐng)點(diǎn)擊這里

dev-reading/fe 是一個(gè)閱讀、導(dǎo)讀、速讀的 repo，不要依賴于 dev-reading/fe 學(xué)習(xí)知識(shí)。本 repo 只是一個(gè)快速了解文章內(nèi)容的工具，并不提供全文解讀和翻譯。你可以通過(guò)本平臺(tái)快速了解文章里面的內(nèi)容，找到感興趣的文章，然后去閱讀全文。

本文地址：https://github.com/dev-readin...

閱讀時(shí)間大概 3 分鐘

CSS 的新屬性 overscroll-behavior 允許開(kāi)發(fā)者覆蓋默認(rèn)的瀏覽器滾動(dòng)行為，一般用在滾動(dòng)到頂部或者底部。

背景 滾動(dòng)邊界和滾動(dòng)鏈接（boundary & chaining）

在 APP 中經(jīng)常使用的抽屜導(dǎo)航(drawer)中，我們期望的效果是：滾動(dòng)到底部時(shí)，滾動(dòng)停止，因?yàn)槲覀兊竭_(dá)了"滾動(dòng)邊界"。

但是在 Web 頁(yè)面中滾動(dòng)并不會(huì)停止，而是繼續(xù)滾動(dòng)抽屜后面的內(nèi)容。效果如下：

我們稱這種行為叫滾動(dòng)鏈接（scroll chaining）。

下拉刷新 pull-to-refresh

下拉刷新是一個(gè)在移動(dòng)端經(jīng)常使用的操作，Chrome 移動(dòng)版也增加了下拉刷新的支持。

Twitter PWA 版本的自定義下拉刷新：

Chrome Android 版的原生下拉刷新（刷新整個(gè)頁(yè)面）：

很多時(shí)候我們需要禁用原生的 pull-to-refresh 行為。

以前我們想出各種方式來(lái)處理滾動(dòng)，比如：不讓頁(yè)面滾動(dòng)，而是使用 touch 事件處理滾動(dòng)行為，使用 100vw/vh 設(shè)置頁(yè)面高度禁止內(nèi)容溢出或滾動(dòng)，等等。。。

現(xiàn)在我們可以使用 overscroll-behavior。

介紹 overscroll-behavior

overscroll-behavior 屬性有 3 個(gè)值：

auto - 默認(rèn)。元素的滾動(dòng)會(huì)傳播給祖先元素。

contain - 阻止?jié)L動(dòng)鏈接。滾動(dòng)不會(huì)傳播給祖先，但會(huì)顯示元素內(nèi)的原生效果。例如，Android 上的炫光效果或 iOS 上的回彈效果，當(dāng)用戶觸摸滾動(dòng)邊界時(shí)會(huì)通知用戶。注意：overscroll-behavior: contain 在 html 元素上使用可防止?jié)L動(dòng)導(dǎo)航操作。

none - 和 contain 一樣，但它也可以防止節(jié)點(diǎn)本身的滾動(dòng)效果（例如 Android 炫光或 iOS 回彈）。

阻止 fixed 定位元素的滾動(dòng)傳播

當(dāng)一個(gè) fixed 定位元素滾動(dòng)到邊界時(shí)，會(huì)滾動(dòng)元素后面的內(nèi)容。如下：

我們可以使用 overscroll-behavior: contain 阻止這種行為。

如果我們有一個(gè) fixed 定位的彈出層需要滾動(dòng)時(shí)，默認(rèn)是這樣的，如下：

使用 overscroll-behavior: contain 可以阻止?jié)L動(dòng)傳播給父元素，如下：

禁用下拉刷新 pull-to-refresh

禁用原生的下拉刷新效果，只需要在 body 或 html 元素添加：

body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
}

當(dāng)我們阻止了原生的下拉刷新后，就可以實(shí)現(xiàn)自己定義的下拉刷新。否則會(huì)出現(xiàn)兩個(gè)下拉刷新：

之前：

之后：

禁用炫光和回彈效果

將屬性制定為 none，可以禁用默認(rèn)的滾動(dòng)邊界效果。

body {
  /* 禁用默認(rèn)的下拉刷新和邊界效果
     但是依然可以進(jìn)行滑動(dòng)導(dǎo)航 */
  overscroll-behavior-y: none;
}

之前:

之后：

如果想禁用左右滑動(dòng)的手勢(shì)導(dǎo)航，可以使用 overscroll-behavior-x: none。

完整的 demo

Demo 地址：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 控制滾動(dòng)行為：自定義下拉刷新和溢出效果


如果你想?yún)⑴c討論，請(qǐng)點(diǎn)擊這里

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89800.html

相關(guān)文章

  • 使用 CSS overscroll-behavior 控制滾動(dòng)行為：自定義下拉刷新和溢出效果

    摘要：否則會(huì)出現(xiàn)兩個(gè)下拉刷新之前之后禁用炫光和回彈效果將屬性制定為，可以禁用默認(rèn)的滾動(dòng)邊界效果。完整的地址源碼最終效果閱讀原文討論地址使用控制滾動(dòng)行為自定義下拉刷新和溢出效果如果你想?yún)⑴c討論，請(qǐng)點(diǎn)擊這里 dev-reading/fe 是一個(gè)閱讀、導(dǎo)讀、速讀的 repo，不要依賴于 dev-reading/fe 學(xué)習(xí)知識(shí)。本 repo 只是一個(gè)快速了解文章內(nèi)容的工具，并不提供全文解讀和翻譯。你...

    pinecone 評(píng)論0 收藏0

  • 使用 CSS overscroll-behavior 控制滾動(dòng)行為：自定義下拉刷新和溢出效果

    摘要：否則會(huì)出現(xiàn)兩個(gè)下拉刷新之前之后禁用炫光和回彈效果將屬性制定為，可以禁用默認(rèn)的滾動(dòng)邊界效果。完整的地址源碼最終效果閱讀原文討論地址使用控制滾動(dòng)行為自定義下拉刷新和溢出效果如果你想?yún)⑴c討論，請(qǐng)點(diǎn)擊這里 dev-reading/fe 是一個(gè)閱讀、導(dǎo)讀、速讀的 repo，不要依賴于 dev-reading/fe 學(xué)習(xí)知識(shí)。本 repo 只是一個(gè)快速了解文章內(nèi)容的工具，并不提供全文解讀和翻譯。你...

    baishancloud 評(píng)論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.38 - 神奇的 CSS

    摘要：層疊即表示允許以多種方式來(lái)描述樣式，一個(gè)元素可以被渲染呈現(xiàn)出多種樣式?？梢宰寣傩缘淖兓^(guò)程持續(xù)一段時(shí)間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個(gè)改變是立即生效的，使用后，將按一個(gè)曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

    elliott_hu 評(píng)論0 收藏0

  • 移動(dòng)端滾動(dòng)研究

    摘要：還會(huì)有一個(gè)性能上的問(wèn)題就是當(dāng)頁(yè)面的列表過(guò)長(zhǎng)，元素過(guò)多時(shí)，在模擬滾動(dòng)，下拉刷新這段時(shí)間內(nèi)，頁(yè)面也會(huì)有卡頓現(xiàn)象，這里采取了一個(gè)優(yōu)化策略即列表較長(zhǎng)時(shí)數(shù)量較多時(shí)，在觸發(fā)下拉刷新的時(shí)機(jī)時(shí)將頁(yè)面視窗之外的元素隱藏或者存放在里面。 移動(dòng)web滾動(dòng)問(wèn)題 在移動(dòng)端如果使用局部滾動(dòng)，意思就是我們的滾動(dòng)在一個(gè)固定寬高的div內(nèi)觸發(fā)，將該div設(shè)置成overflow:scroll/auto;來(lái)形成div內(nèi)部的...

    ghnor 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<