Using CSS Overscroll-behavior to control scrolling behavior: Customizing pull-down refreshes and overflow effects

Tag: One ble comment address add data ref body data-

The new CSS property Overscroll-behavior allows developers to override the default browser scrolling behavior, which is typically used to scroll to the top or bottom.

Background scrolling border and scrolling links (boundary & chaining)

In the APP's frequently used drawer navigation (drawer), we expect the effect to be: scroll to the bottom when scrolling stops as we reach the "scrolling boundary".

However, scrolling through the Web page does not stop, but continues to scroll through the contents behind the drawer . The effect is as follows:

We call this behavior a rolling link (scroll chaining).

Drop-down Refresh Pull-to-refresh

The drop-down refresh is a frequently used operation on the mobile side, and the Chrome mobile version also adds support for the dropdown refresh.

The custom dropdown for the Twitter PWA version

Native drop-down refresh for the Chrome Android version

Many times we need to disable native Pull-to-refresh behavior .

We used to think of various ways to handle scrolling, such as not letting the page scroll, but using the touch event to handle scrolling behavior, using the 100vw/vh set page height to prohibit content overflow or scrolling, etc...

Now we can use overscroll-behavior .

Introduction Overscroll-behavior

overscroll-behaviorThe property has 3 values:

1. autoDefault The scrolling of elements is propagated to the ancestor elements.

2. contain-Block scrolling links. Scrolling is not propagated to ancestors, but it shows native effects within the element. For example, a glare effect on Android or a rebound effect on IOS notifies the user when a user touches a scrolling boundary. Note: overscroll-behavior: contain html use on elements to prevent scrolling navigation operations .

3. none-and the contain same, but it can also prevent the scrolling effect of the node itself (such as Android glare or iOS bounce).

Prevent rolling propagation of fixed positioned elements

When a fixed positioned element scrolls to the boundary, the content behind the element is scrolled. As follows:

We can use to overscroll-behavior: contain block this behavior.

If we have a fixed location where the pop-up layer needs scrolling, the default is this, as follows:

Use overscroll-behavior: contain to prevent scrolling from propagating to the parent element, as follows:

Disable the drop-down refresh Pull-to-refresh

To disable the native drop-down refresh effect, simply body add in or html element:

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

When we stop the native drop-down refresh, we can implement our own defined drop-down refreshes. Otherwise there will be two drop-down refreshes:

Before:

After:

Disable glare and rebound effects

noneYou can disable the default scrolling boundary effect by setting the property to.

body {  /* 禁用默认的下拉刷新和边界效果     但是依然可以进行滑动导航 */  overscroll-behavior-y: none;}

Original address: 1190000012014962

If you want to disable gesture navigation for left and right swipe, you can use overscroll-behavior-x: none .

Using CSS Overscroll-behavior to control scrolling behavior: Customizing pull-down refreshes and overflow effects