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

資訊專欄INFORMATION COLUMN

CSS Sticky 其實(shí)很簡單

davidac / 2448人閱讀

摘要：大致步驟如下監(jiān)聽滾動(dòng)事件，計(jì)算目標(biāo)元素距離視口的距離。距離滿足條件時(shí)，創(chuàng)建占位元素，修改目標(biāo)元素定位方式為。僅僅為了實(shí)現(xiàn)這個(gè)效果頁面上沒有其他內(nèi)容大動(dòng)干戈性價(jià)比很低。對(duì)癥下藥，讓滾動(dòng)發(fā)生在被誤匹配上的祖先元素內(nèi)即可恢復(fù)。

為什么要寫這篇文章

Sticky 也不是新知識(shí)點(diǎn)了，寫這篇文章的原因是由于最近在實(shí)現(xiàn)效果的過程中，發(fā)現(xiàn)我對(duì) Sticky 的理解有偏差，代碼執(zhí)行結(jié)果不如預(yù)期。決定寫篇文章重新學(xué)習(xí)一次。

什么是 Sticky

Sticky （MDN 翻譯成粘性效果）是 CSS 屬性 position 中的一個(gè)可選值。跟我們用得比較多的 static, fixed，relative，absolute 一樣，用來描述元素的定位方式。

從效果上看，Sticky 像是混合體，頁面滑動(dòng)到“臨界點(diǎn)”之前表現(xiàn)為 relative, 到達(dá)“臨界點(diǎn)”時(shí)表現(xiàn)為 fixed。

如何使用

使用 CSS Sticky 只需要兩個(gè)條件。

position: sticky;
top: 0; // right/bottom/left 任一有效值，甚至可以為負(fù)像素值

top：0 意思是當(dāng)元素滑動(dòng)到距離視口 0px 時(shí)再繼續(xù)滑動(dòng)，元素吸頂?？梢栽?這里 看效果（試試看修改 top 值）

對(duì)比 JS 的實(shí)現(xiàn)方案

沒有 CSS Sticky 之前，類似的效果都是使用 JS 實(shí)現(xiàn)。大致步驟如下：

    監(jiān)聽滾動(dòng)事件，計(jì)算目標(biāo)元素距離視口的距離。

    距離不滿足條件時(shí)，按兵不動(dòng)。

    距離滿足條件時(shí)，創(chuàng)建占位元素，修改目標(biāo)元素定位方式為 fixed。

window.addEventListener("scroll", () => {
    const rect = elem.getBoundingClientRect();
    // 計(jì)算目標(biāo)元素和視口的距離
})

在 npm 上搜 sticky 關(guān)鍵字，也有很多優(yōu)秀的包可以使用。以 react-sticky 為例，滿足條件時(shí)會(huì)創(chuàng)建 placeholder 元素（防止頁面抖動(dòng)），同時(shí)讓 header 定位為 fixed。

右邊是 Chrome Dev-Tools 的 layers 面板，藍(lán)色部分為生成的 placeholder。

兩種方案的火焰圖對(duì)比（為了放大效果，我把 cpu 調(diào)慢了 6 倍）

CSS 方案

使用 CSS Sticky，工作都交給 GPU 了，不占用 JS 主線程的資源，在移動(dòng)端上異常流暢。

React Sticky

由于需要在 scroll event 回調(diào)中不斷調(diào)用 getBoundingClientRect，而 getBoundingClientRect 又會(huì)觸發(fā)頁面重排重繪，稍不留神就掉幀卡頓。僅僅為了實(shí)現(xiàn)這個(gè)效果（頁面上沒有其他內(nèi)容）大動(dòng)干戈性價(jià)比很低。

結(jié)論是：實(shí)現(xiàn) Sticky 效果，優(yōu)先選擇 CSS Sticky

理解上的偏差

1. 只在 Containing Block 內(nèi)有效。

修改例子，用一個(gè) div 把 Sticky Header 包裹起來，發(fā)現(xiàn) Sticky 效果失效了！?。?/p> 

  ...
  <div class="wrapper">
    <header>Sticky Headerheader>
  div>
  ...

根據(jù)文檔，Sticky 效果只在 Containing Block 內(nèi)有效，Containing Block 滑出屏幕時(shí)，Stickey Element 也跟著滑走。

修改 wrapper 的高度，看效果。

.wrapper {
  height: 100px;
  background-color: #e6e6e6;
}

多個(gè) Sticky Element 放在一塊就有了前一個(gè)被后一個(gè)頂出去的特效，實(shí)際上并不是真的被頂出去，而是 Containing Block 把它拖走。

代碼看這里

2. Overflow 會(huì)影響 Sticky

修改例子中的代碼，給 #root 加上 overflow: auto

#root {
  overflow: auto; 
}

Sticky 效果再次丟失（overflow 設(shè)置為其他非 visible 的有效值也是同樣效果。）

看了很多相關(guān)的文檔，我的出來的結(jié)論是：

Sticky Element 的 offset 值是依據(jù) nearest scrolling ancestor (距離最近的滾動(dòng)祖先) 計(jì)算的，如果沒有匹配上的祖先元素，則使用視口作為參照物。

問題就出在 overflow-x 或者 overflow-y 其中任一為非 visible 則認(rèn)為是要找的目標(biāo)元素，而在滾動(dòng)窗口的過程中，Sticky Element 和 它找到的目標(biāo)祖先元素的 offset 值一直沒有改變，所以 Sticky 不起作用。

對(duì)癥下藥，讓滾動(dòng)發(fā)生在被“誤匹配”上的祖先元素內(nèi)即可恢復(fù) Sticky Effect。

#root {
  overflow: auto; 
  height: 100vh;
}
兼容性

算上 prefixed ，當(dāng)前 css sticky 手機(jī)端兼容性達(dá)到 94.14%，如果你所做的業(yè)務(wù)需要照顧剩下 5.86% 的用戶，也可以使用 polyfill 或者 position: fixed 。

相關(guān)鏈接

uxdesign.cc/position-st…

codyhouse.co/ds/componen…

medium.com/@elad/css-p…

developer.mozilla.org/zh-CN/docs/…

stackoverflow.com/questions/4…

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

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

相關(guān)文章

  • CSS Sticky 其實(shí)很簡單

    摘要：大致步驟如下監(jiān)聽滾動(dòng)事件，計(jì)算目標(biāo)元素距離視口的距離。距離滿足條件時(shí)，創(chuàng)建占位元素，修改目標(biāo)元素定位方式為。僅僅為了實(shí)現(xiàn)這個(gè)效果頁面上沒有其他內(nèi)容大動(dòng)干戈性價(jià)比很低。對(duì)癥下藥，讓滾動(dòng)發(fā)生在被誤匹配上的祖先元素內(nèi)即可恢復(fù)。為什么要寫這篇文章 Sticky 也不是新知識(shí)點(diǎn)了，寫這篇文章的原因是由于最近在實(shí)現(xiàn)效果的過程中，發(fā)現(xiàn)我對(duì) Sticky 的理解有偏差，代碼執(zhí)行結(jié)果不如預(yù)期。決定寫篇文章重新...

    番茄西紅柿 評(píng)論0 收藏0

  • 純css實(shí)現(xiàn)手機(jī)通訊錄

    摘要：不過要是一個(gè)簡單的小項(xiàng)目，沒那么多要求的話，純還是能很好的適用的，性能上絕對(duì)要比通過滾動(dòng)監(jiān)聽強(qiáng)上好多倍，而且引用方便，只要數(shù)據(jù)生成了就可以直接使用 我們經(jīng)常在手機(jī)上看到通訊錄列表，這類布局一般有兩個(gè)顯著的效果 showImg(https://segmentfault.com/img/remote/1460000016709371?w=360&h=640); 首字母吸頂 快速定位 下...

    王晗 評(píng)論0 收藏0

  • 純css實(shí)現(xiàn)手機(jī)通訊錄

    摘要：不過要是一個(gè)簡單的小項(xiàng)目，沒那么多要求的話，純還是能很好的適用的，性能上絕對(duì)要比通過滾動(dòng)監(jiān)聽強(qiáng)上好多倍，而且引用方便，只要數(shù)據(jù)生成了就可以直接使用 我們經(jīng)常在手機(jī)上看到通訊錄列表，這類布局一般有兩個(gè)顯著的效果 showImg(https://segmentfault.com/img/remote/1460000016709371?w=360&h=640); 首字母吸頂 快速定位 下...

    蘇丹 評(píng)論0 收藏0

  • 純css實(shí)現(xiàn)手機(jī)通訊錄

    摘要：不過要是一個(gè)簡單的小項(xiàng)目，沒那么多要求的話，純還是能很好的適用的，性能上絕對(duì)要比通過滾動(dòng)監(jiān)聽強(qiáng)上好多倍，而且引用方便，只要數(shù)據(jù)生成了就可以直接使用 我們經(jīng)常在手機(jī)上看到通訊錄列表，這類布局一般有兩個(gè)顯著的效果 showImg(https://segmentfault.com/img/remote/1460000016709371?w=360&h=640); 首字母吸頂 快速定位 下...

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

  • CSS粘性定位是怎樣工作的

    摘要：怎樣才能讓粘性定位起作用粘性定位有兩個(gè)主要部分，粘性元素和粘性容器。這是粘性元素可以浮動(dòng)的最大區(qū)域。最好是在以粘性容器底部為自然位置的元素上使用它。 翻譯：瘋狂的技術(shù)宅原文：https://medium.com/@elad/css-... 本文首發(fā)微信公眾號(hào)：jingchengyideng歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章 瀏覽器對(duì) CSS粘性定位有著非常好的支持，但很多...

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

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

0條評(píng)論

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