On the solution of rubber Band Special Effect

Objective

This article turned from scroll bouncing on Your Websites, after reading a lot of harvest, combined with their own understanding, the article into Chinese, on the one hand to deepen understanding on the other hand good text sharing.

Guide

This paper introduces the effect and implementation of spring rolling (i.e. scroll bouncing) on different browsers, and reviews several common solutions on the Internet, and introduces the CSS properties Overscroll-behavior implemented recently. Hopefully it will help to build and design pages with fixed elements.

Scroll Bouncing

Spring effects (also called sliding rubber band Effects or elastic scrolling) often occur in the following scenarios:

1. When scrolling to the top or bottom of a page or HTML element, before the page or element comes back to the upper/lower (that is, before you release your finger or mouse), you will see the white space briefly.
   
2. The same effect can also be seen in CSS scrolling snapping (CSS scroll-snapping) between elements.
   This article focuses on the first case, in other words, the scene when a scrolling port reaches its scrolling boundary
   An in-depth understanding of scroll bouncing can help us decide how to build Web pages and how pages scroll.

Background

When you don't want to see the fixed element move with the page, the spring effect is less pleasant. For example: We want to have a fixed header and footer on the page, or a fixed menu, a specific location to capture the page during scrolling, and no extra scrolling at the top or bottom. At this point we need to see what is the solution to this type of page top/bottom of the spring effect.

Scene Review

If we have the following page, there is a fixed and can't move footer at the bottom, while the rest of the page can scroll. Looks like this:

If it is on a non-touchscreen and touchpad Firefox and other browsers, the performance is expected, but when we use Chrome on a Mac, it's a bit different when scroll to the bottom with the touchpad.

Although footer is set to Fixed=>bottom CSS, this rubber band effect is a bit off guard.
Let's see what position:fixed really means:
According to the CSS 2.1 specification, when a ' box ' (in this case, the dark blue footer) is fixed, it's "fixed with RESP ECT to the viewport and does no move when scrolled. "
According to the CSS 2.1 specification: When a box (which is obviously footer) is set to fixed, it is positioned according to viewport and does not move during scrolling.

Obviously the above effect is outside of expectation.
In order to make the article more complete, the mobile edge, mobile safari and desktop safari effects are tried, and indeed on the Firefox and Chrome performance is different. It's really challenging to develop the same effects on different platforms.

Solution Solutions

The first idea for us is definitely a quick and easy way, so for this case, the preferred CSS is, of course, handled separately. So choose the method below to try it out. The test browser includes Chrome, Firefox, Safari, and Edge and mobile Safari on Win10 and Mac, and the browser version is the latest version of 2018. The page structure is as follows:

Only CSS, HTML to solve the first, absolute positioning and relative positioning of the way

Use absolute to locate the footer, and then the HTML is positioned relative height100% so that footer is always fixed below, and the content height is 100% minus the footer height. Of course, you can also set Padding-bottom to replace Calc, while setting Body-containe to 100% to prevent footer duplication. Language is pale, look at the code is finished:

html {  width: 100%;  height: 100%;  overflow: hidden;  position: relative;}body {  width: 100%;  margin: 0;  font-family: sans-serif;  height: 100%;  overflow: hidden;}.body-container {  height: calc(100% - 100px);  overflow: auto;}.color-picker-main-container {  width: 100%;  font-size: 22px;  padding-bottom: 10px;}footer {  position: absolute;  bottom: 0;  height: 100px;  width: 100%;}

This is almost the same way as the original fixed method. The difference is that the part of the slide is no longer the entire page but the content, not including the footer. The biggest problem in this way is the mobile safari, not just content,footer, but also sliding along ... It was a disaster when the slide was fast. Such as

In addition, the other does not want to see the situation also appeared, when the slide to go to the attempt, found at this time the sliding performance is a bit bad.
Because we set the height of the sliding container to 100% of its own, which hinders the momentum-based scrolling on iOS,
Here momentum-based scrolling, I have no good language to translate, short for the damping sliding bar
In simple terms, the addition of a mobile device to improve the page sliding performance, the more obvious is that when your finger touch the surface of the device, the page itself began to slide, and when the finger stops sliding, the page will also slide a while. For more information please go. I certainly want to have this effect, so be far away from setting the sliding element height100%.

Before proceeding with other attempts, let's slow down and think about the current state. The original fixed position has a rubber band problem, the above converts it to absolute+relative without damping sliding. If you want to slide the damping, the height of the content section cannot be set to 100%. Is it possible to set the height to 100% without explicitly setting it.

html {  width: 100%;  position: fixed;  overflow: hidden;}body {  width: 100%;  margin: 0;  font-family: sans-serif;  position: fixed;  overflow: hidden;}.body-container {  width: 100vw;  height: calc(100vh - 100px);  overflow-y: auto;  // Use momentum-based scrolling on WebKit-based touch devices  -webkit-overflow-scrolling: touch;}.color-picker-main-container {  width: 100%;  font-size: 22px;  padding-bottom: 10px;}footer {  position: fixed;  bottom: 0;  height: 100px;  width: 100%;}

The set html,body are fixed and overflow:hidden. The footer is also fixed.
Set its height to 100vh-footer height in the Body-container content area where scrolling is required,
Add-webkit-overflow-scrolling:touch at the same time, turn on damping slide support.
What will the effect be like?
Chrome and Firefox on Mac are the same as the previous one, and the advantage of this approach is that 100% height is no longer needed.
So momentum-based scrolling performance is good, but in Safari,footer disappeared ...

On iOS safari, footer gets shorter and has an extra interval at the bottom. Also, the ability to scroll through the page disappears when you roll the bottom part.

-webkit-overflow-scrolling:touch in the above code; the ability to add momentum-based scrolling to the specified element. However, this attribute is not standard in MDN, and compatibility needs to be considered, so it can only be discarded.

Another scenario is as follows:

html {  position: fixed;  height: 100%;  overflow: hidden;}body {  font-family: sans-serif;  margin: 0;  width: 100vw;   height: 100vh;  overflow-y: auto;  overflow-x: hidden;  -webkit-overflow-scrolling: touch;}.color-picker-main-container {  width: 100%;  font-size: 22px;  padding-bottom: 110px;}footer {  position: fixed;}

This is a good way to perform on different desktop browsers, with damping sliding, footer fixed and not following the move. But the downside of this approach is that footer can be found to be slightly jittery on iOS Safari
And when you swipe, you can see the content under footer.

Using JavaScript

Since there are some flaws in the way above, then we should try JS to solve it.
It is first stated that I do not recommend and recommend that you try to avoid using this method. Based on the experience of the original author, there should be a more elegant and html+css way of introduction.
However, it has taken a lot of time to solve the problem, to see if there is a better way to use JS there is no loss.

One way to avoid sliding springs is to block the Touchmove or Touchstart event of window or document. The idea is to block the Tocuch event of the outer window, allowing only the touch of the content section. The code is as follows:

// Prevents window from moving on touch on older browsers.window.addEventListener('touchmove', function (event) {  event.preventDefault()}, false)// Allows content to move on touch.document.querySelector('.body-container').addEventListener('touchmove', function (event) {  event.stopPropagation()}, false)

I tried many ways to make the slide perform well, to stop widow Touchmove and to stop the document from making no difference, and I tried to use Touchstart and touchmove to control the slide,
But there is no difference between the two ways. It was later discovered that, for performance reasons, the Event.preventdefault () should not be used in this way, and the option to set false as passive should be set.

// Prevents window from moving on touch on newer browsers.window.addEventListener('touchmove', function (event) {  event.preventDefault()}, {passive: false})

Tools

You can also use Inobounce to help yourself, the library is designed to solve the spring effect when the Web App slides on iOS. When you need to mention it, use the library to solve the problem with-webkit-overflow-scrolling.
In addition, I mentioned at the end of the concise method and its similarities, you can compare the two.

Overscroll Behavior

After trying so many scenarios, I discovered a CSS property Overscroll-behavior, which was implemented in Chrome 63 and Firefox 59 in December 2017 and March 2018.
According to the definition of MDN: Allows you to control the behavior of the browser's sliding overflow-the behavior that occurs when the edge boundary of the scrolling area is reached. This is the last option.
The only thing that needs to be done is to set the Overscroll-behavior:none in the body and set footer to fixed, and the entire page application momentum-based scrolling is acceptable compared to no foter.
More objective is the edge is being developed, the future can be period.

Concluding remarks Reference articles

1. Momentum scrolling on IOS Overflow Elements
2. Scroll Bouncing on Your Websites
3. MOMENTUM scrolling USING JQUERY

Thanks again to the original author William Lim, which offers a solution to the rich sliding rubber band effect. Caishuxueqian, some of the translation is not in place more please correct, details asynchronous original