Comparison of 5 CSS scrolling ceiling implementation methods (performance upgrade version)

Preview of revised version

This article was written three days ago. A senior colleague gave me some suggestions for revision, and I think these suggestions are indeed pertinent. So there is this upgraded modified version. The code has been updated to GitHub.

The modifications are as follows:

1. Added graphic description to intuitively explain the meaning of getBoundingClientRect() collection
2. How to avoid the risk of frequent reflow (optimizing scroll monitoring)
3. Monitoring scrolling performance issues (using IntersectionObserver, new solution)

The modified and updated contents are in points 4 and 5. If you have read this article, you can directly read the modified and updated contents. Or you can watch it again.

Preface

The first request I received when I joined the second company was to repair the rolling ceiling effect that was previously outsourced. I was wondering why there would be a bug in a rolling ceiling. Later, I checked the code and found that the offsetTop property was used directly, and no compatibility processing was done.

offsetTop

Used to obtain the distance (offset value) from the current element to the top of the positioned parent ( element.offsetParent ).

The definition of positioning parent offsetParent is: the parent element with position != static closest to the current element.

Perhaps the person who wrote this code did not notice the additional condition of "positioning the parent".

Later in the project, I always encountered the rolling ceiling effect that needed to be realized. Now I will give a detailed introduction to the 4 rolling ceiling realization methods I know.

Do you know all the above four methods? The relevant code has been uploaded to GitHub. If you are interested, you can clone the code and run it locally. Please give a star to support it.

Four implementation methods

Let's take a look at the effect diagram first:

1. Use position:sticky to achieve

1. What is sticky positioning?

Sticky positioning is equivalent to the combination of relative positioning and fixed positioning. When the distance between an element and its parent element reaches the requirement of sticky positioning, the relative positioning effect of the element becomes the fixed positioning effect.

MDN Portal

2. How to use?

Conditions of use:

1. The parent element cannot have overflow:hidden or overflow:auto attributes
2. You must specify one of the top, bottom, left, and right values, otherwise it will only be in relative positioning.
3. The height of the parent element cannot be lower than the height of the sticky element
4. A sticky element is only effective within its parent element.

This effect can be achieved by adding the following styles to the elements that need to be scrolled:

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

3. Is this attribute useful?

Let's first look at the compatibility of this property in Can I use:

It can be seen that the compatibility of this attribute is not very good, because this API is still an experimental attribute. However, the compatibility of this API in IOS system is relatively good.

Therefore, when we use this API in a production environment, we usually use it in combination with the following methods.

2. Using JQuery's offset().top implementation

We know that JQuery encapsulates the API for operating DOM and reading DOM calculated attributes. Based on the combination of offset().top API and scrollTop(), we can also achieve the scrolling ceiling effect.

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

This is certainly possible, but as JQuery is slowly phasing out of the picture, we try not to use JQuery's API in our code. We can process the native offsetTop ourselves based on the source code of offset().top. So there is a third way.

scrolloTop() has compatibility issues. In WeChat browser, IE, and some versions of Firefox, the value of $('html').scrollTop() will be 0, so there is a third solution for compatibility.

3. Use native offsetTop implementation

We know that offsetTop is the offset of the relative positioning parent. If the element that needs to be scrolled appears to be positioned as a parent element, then offsetTop will not get the distance between the element and the top of the page.

We can do the following processing on offsetTop ourselves:

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;
    }
}

use:

...
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;
}
...

Do you see some problems with the above two methods?

Do we really need to use the scrollTop - offsetTop value to achieve the scroll top effect? The answer is no.

Let’s look at the fourth option.

4. Use obj.getBoundingClientRect().top to implement

Definition: This API can tell you the distance of an element in the page relative to the browser window.

Usage: tab ceiling can use obj.getBoundingClientRect().top instead of scrollTop - offsetTop, the code is as follows:

//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: {
      //Scroll monitoring, head fixed handleScroll: function () {
        let offsetTop = this.$refs.pride_tab_fixed.getBoundingClientRect().top;
        this.titleFixed = offsetTop < 0;
        //some code
      }
    }
  }

Difference between offsetTop and getBoundingClientRect()

1. getBoundingClientRect():

Used to obtain the left, top, right and bottom positions of an element on the page relative to the browser window. The rolled-up portion of the document is not included.

This function returns an object with 8 properties: top, right, buttom, left, width, height, x, y

2. offsetTop:

Used to obtain the distance (offset value) from the current element to the top of the positioned parent ( element.offsetParent ).

The definition of positioning parent offsetParent is: the parent element with position != static closest to the current element.

The offsetTop and offsetParent methods can be combined to obtain the distance from the element to the top margin of the body. The code is as follows:

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;
    }
}

Extended knowledge points

offsetWidth:

The amount of space the element takes up horizontally:

offsetWidth = border-left + padding-left + width + padding-right + border-right

offsetHeight:

The amount of space the element takes up vertically:

offsetHeight = border-top + padding-top + height + padding-bottom + border-bottom

Note: If there is a vertical scroll bar, offsetWidth also includes the width of the vertical scroll bar; if there is a horizontal scroll bar, offsetHeight also includes the height of the horizontal scroll bar;

offsetTop:

The pixel distance between the top outer border of the element and the top inner border of the offsetParent element;

offsetLeft:

The pixel distance from the left outer border of the element to the left inner border of the offsetParent element;

Precautions

1. All offset properties are read-only;
2. If display:none is set for an element, its offset attribute is 0;
3. Each access to the offset property requires recalculation (saving the variable);
4. When using it, the DOM may not be initialized, and the attribute may be read, in which case 0 will be returned. For this problem, we need to wait until the DOM element is initialized before executing.

Two problems encountered

1. The moment of ceiling suction is accompanied by shaking

The reason for the jitter is that when the position of the ceiling element becomes fixed, the element is out of the document flow and the next element fills its place. It is this padding operation that causes the jitter.

Solution

Add a parent element of the same height to this ceiling element. We monitor the getBoundingClientRect().top value of this parent element to achieve the ceiling effect, that is:

<div class="title_box" ref="pride_tab_fixed">
    <div class="title" :class="titleFixed == true ? 'isFixed' :''">
    Use `obj.getBoundingClientRect().top` to achieve</div>
</div>

This solution can solve the jitter bug.

2. The ceiling effect cannot respond in time

This problem is quite a headache for me, and I never paid attention to it before. It wasn't until one day when I ordered takeout through Meituan that I started to pay attention to this problem.

describe:

1. When the page scrolls down, the ceiling element will not appear until the page stops scrolling.
2. When the page is scrolled up, the ceiling element does not return to its original state when the document flow position is restored when the page is scrolled up, and it will return to its original state only after the page stops scrolling.

reason:

On iOS, scroll events cannot be monitored in real time. Related events are triggered only when scrolling stops.

Solution:

Remember position:sticky in the first solution? This attribute has good compatibility in systems above IOS6, so we can distinguish IOS and Android devices and perform two different processing.

IOS uses position:sticky, and Android uses scroll monitoring to monitor the value of getBoundingClientRect().top.

What if the IOS version is too low? Here is an idea: window.requestAnimationFrame().

Performance Optimization (New)

This concludes the introduction to the 4 rolling ceiling methods, but is this really the end? In fact, there is still room for optimization.
We optimize performance from two directions (actually one direction):

1. Avoid excessive reflow
2. Optimize scroll monitoring events

Problem location process

We know that excessive reflow will degrade the performance of the page. Therefore, we need to reduce the number of reflows as much as possible to give users a smoother experience.

Some friends may say, I know this, but what does this have to do with the rolling ceiling?

Don't worry, do you still remember that the scroll top uses offsetTop or getBoundingClientRect().top to get the response offset?

Since the attributes of the element are read, it will naturally cause the page to reflow.

Therefore, our optimization direction is to reduce the number of times element attributes are read. Looking at the code, we find that once a screen scrolling event is triggered, the relevant method will be called to read the offset of the element.

Optimization plan

There are two solutions to this problem:

1. Sacrifice smoothness to meet performance, use throttling to control the calls of related methods
2. Using IntersectionObserver in combination with throttling also sacrifices smoothness.

The first option

This solution is very common, but the side effects it brings are also obvious, that is, there will be some delay in the ceiling effect. If the product is acceptable, it is a good method.

This allows you to control only reading within a certain period of time

The throttling function here is directly the throttle method encapsulated by lodash.js.

The code is as follows:

window.addEventListener('scroll', _.throttle(self.handleScrollThree, 50));

Second option

The second solution is relatively easier to accept. If IntersectionObserver is supported, use IntersectionObserver, otherwise use throttle.

Let's talk about IntersectionObserver first

IntersectionObserver can be used to monitor whether an element has entered the visible area of ​​the device without frequent calculations to make this judgment.

With this attribute, we can avoid reading the relative position of an element when the element is not in the visible range, thus achieving performance optimization. When the browser does not support this attribute, throttle is used to handle it.

Let's see how compatible this property is:

It supports more than 60% and can still be used in projects (you need to do a good job of compatibility).

For more information on how to use IntersectionObserver, see MDN or Ruan Yifeng's tutorial.

The code using IntersectionObserver and throttle optimization is as follows:

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));
    }
}, 

Notice

The IntersectionObserver API is asynchronous and is not triggered synchronously with the scrolling of the target element.

The specification states that IntersectionObserver implementations should use requestIdleCallback(). It will not execute the callback immediately, it will call window.requestIdleCallback() to asynchronously execute the callback function we specify, and also stipulates that the maximum delay time is 100 milliseconds.

Summarize:

This solution combining IntersectionObserver and throttle is an alternative solution. The advantage of this solution is that it can effectively reduce the risk of page reflow, but it also has disadvantages, and it requires sacrificing the smoothness of the page. The specific choice depends on business needs.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.