【前端詞典】5 種滾動吸頂實現方式的比較[效能升級版]

小生方勤發表於2019-04-09
前端

修改版預覽

這篇文章是三天前寫就的，有大佬給我提了一些修改意見，我覺得這個意見確實中肯。所以就有了這個升級的修改版本。程式碼同步更新到 GitHub 了。

修改內容如下：

  1. 新增了圖文說明，直觀的說明 getBoundingClientRect()集合含義
  2. 頻繁 reflow 風險該如何規避(優化滾動監聽)
  3. 監聽滾動帶來的效能問題(使用 IntersectionObserver, 新方案)

修改更新的內容在第 4 點和第 5 點，如果你看過本文，可以直接看修改更新的內容。或者你可以再看一遍。

前言

我入職第二家公司接到的第一個需求就是修復之前外包做的滾動吸頂效果。我當時很納悶為何一個滾動吸頂會有 bug，後來我檢視程式碼才發現直接用的是 offsetTop 這個屬性，而且並沒有做相容性處理。

offsetTop

用於獲得當前元素到定位父級（ element.offsetParent ）頂部的距離（偏移值）。

定位父級 offsetParent 的定義是：與當前元素最近的 position != static 的父級元素。

或許寫這個程式碼的人沒有注意到“定位父級”這個這個附屬條件。

後來在專案中總會遇到滾動吸頂的效果需要實現，現在我將我知道的 4 種滾動吸頂實現方式做詳細介紹。

目錄

  1. 使用 position:sticky 實現
  2. 使用 JQuery 的 offset().top 實現
  3. 使用原生的 offsetTop 實現
  4. 使用 obj.getBoundingClientRect().top 實現
  5. 效能優化篇

以上這四種方式你都瞭解嗎？相關程式碼已上傳到 GitHub ，感興趣的可以 clone 程式碼到本地執行。望給個 star 支援一下。

四種實現方式

我們先看一下效果圖：

【前端詞典】5 種滾動吸頂實現方式的比較[效能升級版]

一、使用 position:sticky 實現

1、粘性定位是什麼？

粘性定位 sticky 相當於相對定位 relative 和固定定位 fixed 的結合；在頁面元素滾動過程中，某個元素距離其父元素的距離達到 sticky 粘性定位的要求時；元素的相對定位 relative 效果變成固定定位 fixed 的效果。

MDN 傳送門

2、如何使用？

使用條件：

  1. 父元素不能 overflow:hidden 或者 overflow:auto 屬性
  2. 必須指定 top、bottom、left、right 4 個值之一，否則只會處於相對定位
  3. 父元素的高度不能低於 sticky 元素的高度
  4. sticky 元素僅在其父元素內生效

在需要滾動吸頂的元素加上以下樣式便可以實現這個效果：

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
複製程式碼

3、這個屬性好用嗎？

我們先看下在 Can I use 中看看這個屬性的相容性：

【前端詞典】5 種滾動吸頂實現方式的比較[效能升級版]

可以看出這個屬性的相容性並不是很好，因為這個 API 還只是實驗性的屬性。不過這個 API 在 IOS 系統的相容性還是比較好的。

所以我們在生產環境如果使用這個 API 的時候一般會和下面的幾種方式結合使用。

二、使用 JQuery 的 offset().top 實現

我們知道 JQuery 中封裝了操作 DOM 和讀取 DOM 計算屬性的 API，基於 offset().top 這個 API 和 scrollTop() 的結合，我們也可以實現滾動吸頂效果。

...
window.addEventListener('scroll', self.handleScrollOne);
...
handleScrollOne: function() {
    let self = this;
    let scrollTop = $('html').scrollTop();
    let offsetTop = $('.title_box').offset().top;
    self.titleFixed = scrollTop > offsetTop;
}
...
複製程式碼

這樣實現固然可以，不過由於 JQuery 慢慢的退出歷史的舞臺，我們在程式碼中儘量不使用 JQuery 的 API。我們可以基於 offset().top 的原始碼自己處理原生 offsetTop。於是乎就有了第三種方式。

scrolloTop() 有相容性問題，在微信瀏覽器、IE、某些 firefox 版本中 $('html').scrollTop() 的值會為 0，於是乎也就有了第三種方案的相容性寫法。

三、使用原生的 offsetTop 實現

我們知道 offsetTop 是相對定位父級的偏移量，倘若需要滾動吸頂的元素出現定位父級元素，那麼 offsetTop 獲取的就不是元素距離頁面頂部的距離。

我們可以自己對 offsetTop 做以下處理：

getOffset: function(obj,direction){
    let offsetL = 0;
    let offsetT = 0;
    while( obj!== window.document.body && obj !== null ){
        offsetL += obj.offsetLeft;
        offsetT += obj.offsetTop;
        obj = obj.offsetParent;
    }
    if(direction === 'left'){
        return offsetL;
    }else {
        return offsetT;
    }
}
複製程式碼

使用：

...
window.addEventListener('scroll', self.handleScrollTwo);
...
handleScrollTwo: function() {
    let self = this;
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    let offsetTop = self.getOffset(self.$refs.pride_tab_fixed);
    self.titleFixed = scrollTop > offsetTop;
}
...
複製程式碼

你是不是看出了以上兩種方式的一些問題？

我們一定需要使用 scrollTop - offsetTop 的值來實現滾動吸頂的效果嗎？答案是否定的。

我們一同看看第四種方案。

四、使用 obj.getBoundingClientRect().top 實現

定義：

這個 API 可以告訴你頁面中某個元素相對瀏覽器視窗上下左右的距離。

使用：
tab 吸頂可以使用 obj.getBoundingClientRect().top 代替 scrollTop - offsetTop,程式碼如下：

// html
<div class="pride_tab_fixed" ref="pride_tab_fixed">
    <div class="pride_tab" :class="titleFixed == true ? 'isFixed' :''">
        // some code
    </div>
</div>

// vue
export default {
    data(){
      return{
        titleFixed: false
      }
    },
    activated(){
      this.titleFixed = false;
      window.addEventListener('scroll', this.handleScroll);
    },
    methods: {
      //滾動監聽，頭部固定
      handleScroll: function () {
        let offsetTop = this.$refs.pride_tab_fixed.getBoundingClientRect().top;
        this.titleFixed = offsetTop < 0;
        // some code
      }
    }
  }
複製程式碼

offsetTop 和 getBoundingClientRect() 區別

1. getBoundingClientRect():

用於獲得頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置。不包含文件卷起來的部分。

【前端詞典】5 種滾動吸頂實現方式的比較[效能升級版]

該函式返回一個 object 物件，有8個屬性： top, right, buttom, left, width, height, x, y

【前端詞典】5 種滾動吸頂實現方式的比較[效能升級版]

2. offsetTop:

用於獲得當前元素到定位父級（ element.offsetParent ）頂部的距離（偏移值）。

定位父級 offsetParent 的定義是：與當前元素最近的 position != static 的父級元素。

offsetTop 和 offsetParent 方法相結合可以獲得該元素到 body 上邊距的距離。程式碼如下：

getOffset: function(obj,direction){
    let offsetL = 0;
    let offsetT = 0;
    while( obj!== window.document.body && obj !== null ){
        offsetL += obj.offsetLeft;
        offsetT += obj.offsetTop;
        obj = obj.offsetParent;
    }
    if(direction === 'left'){
        return offsetL;
    }else {
        return offsetT;
    }
}
複製程式碼

延伸知識點

offsetWidth：

元素在水平方向上佔用的空間大小：
offsetWidth = border-left + padding-left + width + padding-right + border-right

offsetHeight：

元素在垂直方向上佔用的空間大小：
offsetHeight = border-top + padding-top + height + padding-bottom + border-bottom

注：如果存在垂直滾動條，offsetWidth 也包括垂直滾動條的寬度；如果存在水平滾動條，offsetHeight 也包括水平滾動條的高度；

offsetTop：

元素的上外邊框至 offsetParent 元素的上內邊框之間的畫素距離；

offsetLeft：

元素的左外邊框至 offsetParent 元素的左內邊框之間的畫素距離；

注意事項

  1. 所有偏移量屬性都是隻讀的；
  2. 如果給元素設定了 display:none，則它的偏移量屬性都為 0；
  3. 每次訪問偏移量屬性都需要重新計算（儲存變數）；
  4. 在使用的時候可能出現 DOM 沒有初始化，就讀取了該屬性，這個時候會返回 0；對於這個問題我們需要等到 DOM 元素初始化完成後再執行。

遇到的兩個問題

一、吸頂的那一刻伴隨抖動

出現抖動的原因是因為：在吸頂元素 position 變為 fixed 的時候，該元素就脫離了文件流，下一個元素就進行了補位。就是這個補位操作造成了抖動。

解決方案

為這個吸頂元素新增一個等高的父元素，我們監聽這個父元素的 getBoundingClientRect().top 值來實現吸頂效果，即：

<div class="title_box" ref="pride_tab_fixed">
    <div class="title" :class="titleFixed == true ? 'isFixed' :''">
    使用 `obj.getBoundingClientRect().top` 實現
    </div>
</div>
複製程式碼

這個方案就可以解決抖動的 Bug 了。

二、吸頂效果不能及時響應

這個問題是我比較頭痛，之前我沒有在意過這個問題。直到有一天我用美團點外賣的時候，我才開始注意這個問題。

描述：

  1. 當頁面往下滾動時，吸頂元素需要等頁面滾動停止之後才會出現吸頂效果
  2. 當頁面往上滾動時，滾動到吸頂元素恢復文件流位置時吸頂元素不恢復原樣，而等頁面停止滾動之後才會恢復原樣

原因： 在 ios 系統上不能實時監聽 scroll 滾動監聽事件，在滾動停止時才觸發其相關的事件。

解決方案：

還記得第一種方案中的 position:sticky 嗎？這個屬性在 IOS6 以上的系統中有良好的相容性，所以我們可以區分 IOS 和 Android 裝置做兩種處理。

IOS 使用 position:sticky，Android 使用滾動監聽 getBoundingClientRect().top 的值。

如果 IOS 版本過低呢？這裡提供一種思路：window.requestAnimationFrame()。

效能優化篇（新增）

到此 4 中滾動吸頂的方式介紹完了，可是這樣就真的結束了嗎？其實還是有優化的空間的。

我們從兩個方向做效能優化（其實是一個方向）：

  1. 避免過度的 reflow
  2. 優化滾動監聽事件

問題定位過程

我們知道過度的 reflow 會使頁面的效能下降。所以我們需要儘可能的降低 reflow 的次數，給使用者更加流暢的感覺。

有的朋友或許會說這個我知道，可是這和滾動吸頂有什麼關係呢？

不急，你是否還記得滾動吸頂使用了 offsetTop 或者 getBoundingClientRect().top 來獲取響應的偏移量呢？

既然有讀取元素的屬性就自然會導致頁面 reflow。

因此我們優化的方向就是從減少讀取元素屬性次數下手，檢視程式碼發現一觸發螢幕滾動事件就會呼叫相關方法讀取元素的偏移量。

優化方案

解決這個問題有以下兩個方案：

  1. 犧牲平滑度滿足效能，使用節流控制相關方法的呼叫
  2. 使用 IntersectionObserver 和節流結合，也犧牲了平滑度。

第一種方案

這個方案很常見，不過其帶來的副作用也很明顯，就是在吸頂效果會有些延遲，如果產品可以接受那就不失為一種好方法。

這樣可以控制在一定時間內只讀取

這裡節流函式就直接是用 lodash.js 封裝好的 throttle 方法。

程式碼如下：

window.addEventListener('scroll', _.throttle(self.handleScrollThree, 50));
複製程式碼

第二種方案

第二種方案相對來說容易接受一點，就是支援 IntersectionObserver 就用 IntersectionObserver，否則就用 throttle。

我們先講講 IntersectionObserver

IntersectionObserver 可以用來監聽元素是否進入了裝置的可視區域之內，而不需要頻繁的計算來做這個判斷。

通過這個屬性我們就可以在元素不在可視範圍內，不去讀取元素的相對位置，已達到效能優化；當瀏覽器不支援這個屬性的時候就使用 throttle 來處理。

我們看看這個屬性的相容性怎麼樣：

【前端詞典】5 種滾動吸頂實現方式的比較[效能升級版]

大概支援了 60% 以上，在專案中還是可以使用的（你需要做好相容性處理）。

關於 IntersectionObserver 如何使用，請看 MDN 或者 阮一峰教程。

使用 IntersectionObserver 和 throttle 優化的程式碼如下：

IntersectionObserverFun: function() {
    let self = this;
    let ele = self.$refs.pride_tab_fixed;
    if( !IntersectionObserver ){
        let observer = new IntersectionObserver(function(){
            let offsetTop = ele.getBoundingClientRect().top;
            self.titleFixed = offsetTop < 0;
        }, {
            threshold: [1]
        });
        observer.observe(document.getElementsByClassName('title_box')[0]);
    } else {
        window.addEventListener('scroll', _.throttle(function(){
            let offsetTop = ele.getBoundingClientRect().top;
            self.titleFixed = offsetTop < 0;
        }, 50));
    }
}, 
複製程式碼

注意

IntersectionObserver API 是非同步的，不隨著目標元素的滾動同步觸發。

規格寫明，IntersectionObserver的實現，應該採用 requestIdleCallback()。它不會立即執行回撥，它會呼叫 window.requestIdleCallback() 來非同步的執行我們指定的回撥函式，而且還規定了最大的延遲時間是 100 毫秒。

總結：

這種 IntersectionObserver 和 throttle 結合的方案不失為一種可選擇的方案，這種方案的優點就在於可以有效地減少頁面 reflow 的風險，不過缺點也是有的，需要犧牲頁面的平滑度。具體該如何取捨，就看業務的需要啦。

前端詞典系列

《前端詞典》這個系列會持續更新，每一期我都會講一個出現頻率較高的知識點。希望大家在閱讀的過程當中可以斧正文中出現不嚴謹或是錯誤的地方，本人將不勝感激；若通過本系列而有所得，本人亦將不勝欣喜。

如果你覺得我的文章寫的還不錯，可以關注我的微信公眾號，公眾號裡會提前劇透呦。

【前端詞典】5 種滾動吸頂實現方式的比較[效能升級版]

你也可以新增我的微信 wqhhsd， 歡迎交流。

熱門文章傳送門

  1. 【前端詞典】滾動穿透問題的解決方案
  2. 繼承（一） - 原型鏈你真的懂嗎？
  3. 【前端詞典】進階必備的網路基礎（上）
  4. 【前端詞典】進階必備的網路基礎（下）
  5. 【前端詞典】實現 Canvas 下雪背景引發的效能思考
  6. 【前端詞典】從輸入 URL 到展現涉及哪些快取環節(非常詳細)

相關文章