safari bounce scroll

A rather geeky/technical weblog, est. 2001, by Bramus

Prevent overscroll/bounce in iOS MobileSafari and Chrome (CSS only)

UPDATE 2017.12 : For non-Safari browsers (e.g. Chrome, Firefox) you can use overscroll-behavior to solve exactly this. Simply apply overscroll-behavior-y: none; on html, body and be done with it.

Safari however does not support it …

UPDATE 2021.06 : The workaround below no longer seems to work in recent iOS/MobileSafari versions (iOS 12+) … 😭. Follow Webkit bug #176454 to stay up-to-date on support in Safari.

Know this bouncy overscrolling behaviour that browsers have been doing whenever you reach the “edge” of the page its contents?

Sometimes – in fullscreen apps for example – you’ll want to disable this. Now, there’s no need to resort to JavaScript and hijack touchstart , as the little CSS snippet below can prevent the rubber band scrolling:

Tested with iOS8, iOS9, and iOS10.

However, this snippet disables *all* scrolling on the body . If you want to retain scrolling on your page (but now without the overscroll effect) , you need to make use of a scrollable wrapper that spans the entire window/screen and which wraps around your entire content. Like so:

You’ll most likely want to remove the margin and padding from the body too in that case 😉

Note that your mileage may vary. Other pure CSS solutions do exist (untested though)

🔥 Like what you see? Want to stay in the loop? Here's how:

• Follow @bramus on Twitter
• Follow @bramus on Mastodon
• Follow @bramusblog on Twitter
• Follow bram.us using RSS

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997) , he fell in love with the web and has been tinkering with it ever since (more …) View more posts

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

30 Comments

Not good enough.

Don’t know what you’re talking about this worked fine for me

body, body {} what does it mean, is it a mistake

A mistake indeed. Should’ve been html, body

Worth pointing out that this prevents *any* scrolling when viewed in a browser.

That’s correct. I’ve updated the post to include instructions to using a scrollable wrapper around your content. That way overscroll on the body is prevented, but scrolling of the content is maintained.

Any way to make this work with a site that’s been “Added to Homescreen”?

I can’t seem to find anything :[

This should work fine for a PWA. At least on ios 13 it is working perfect

While this works fine for a web page in a browser, it doesn’t seem to help with a Cordova hybrid app.. When I run my app, it’s almost like the WebView component itself is scrolling as opposed to something within the “html” element. I confirmed this by selecting the “html” element in VS2015’s DOM Inspector and watching the location of the DOM highlight while scrolling.

All the solutions I’ve found end up disabling momentum scrolling completely, which results in another issue where iOS can’t scroll a page if the tap-drag starts on an “input” field.

So, does anybody know of a way to get around this?

Does anyone agree that iOS is absolute garbage for this!!

Now all my absolute elements bounce like hell :))

• Pingback: Customizing Pull-to-Refresh and Overflow Effects with CSS’ overscroll-behavior | Bram.us

thanks a lot. worked perfectly for me

thanks works perfect

i did following this guide but it still have bouncing effect when scrolling to bottom or top viewport ?

• Pingback: Scroll Bouncing On Your Websites - ugurak

this destroys the whole website you dumbass

Not if you know what you are doing … or if you’ve read the entire post …

Thanks, It worked perfectly for me on chat page:)

Because you didn’t give position relative to their father’s elements.

Best answer. it worked for me.

What if content is more than 100vh

• Pingback: 如果使用-webkit-overflow-scrolling，有时div滚动会冻结|ios问答

This works for me, but it creates some scrolling lag (in osx safari at least) sooo…no good 🙁

Thank you so much, it works as expected

This works but since the body is no larger than the screen size, the address bar will not minimise when scrolling down, not important for a lot of people but I’m working on a webapp and I realised this halfway through

It’s a shame we still need to fiddle with non-working workarounds for this in 2021. There is a standard CSS property out there, implemented by actually all other browser vendors but Apple simply refuses to adopt it…

I could not agree more.

Perhaps Apple deliberately keeps Safari in this state so that folks are forced to use Apps on their devices.

Although, Apple is adding support for overscroll-behavior in Safari 16 but this solution works for older Safari versions. Thanks!!!1

I will write my solution, I hope my method will help many people.

Css: html{ overscroll-behavior: none; } body { overflow-y: scroll; }

Leave a comment

Cancel reply.

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail. You can also subscribe without commenting.

This site uses Akismet to reduce spam. Learn how your comment data is processed .

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free

overscroll-behavior

The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area.

Constituent properties

This property is a shorthand for the following CSS properties:

• overscroll-behavior-x
• overscroll-behavior-y

The overscroll-behavior property is specified as one or two keywords chosen from the list of values below.

Two keywords specifies the overscroll-behavior value on the x and y axes respectively. If only one value is specified, both x and y are assumed to have the same value.

The default scroll overflow behavior occurs as normal.

Default scroll overflow behavior (e.g., "bounce" effects) is observed inside the element where this value is set. However, no scroll chaining occurs on neighboring scrolling areas; the underlying elements will not scroll. The contain value disables native browser navigation, including the vertical pull-to-refresh gesture and horizontal swipe navigation.

No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

Description

By default, mobile browsers tend to provide a "bounce" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached. You may also have noticed that when you have a dialog box with scrolling content at the top of a page that also has scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called scroll chaining .

In some cases, these behaviors are not desirable. You can use overscroll-behavior to get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired "pull to refresh"-type behavior.

Note that this property applies only to scroll containers . In particular, since an <iframe> is not a scroll container, setting this property on an iframe has no effect. To control scroll chaining from an iframe, set overscroll-behavior on both the <html> and the <body> elements of the iframe's document.

Formal definition

Formal syntax, preventing an underlying element from scrolling.

In our overscroll-behavior example (see the source code also), we present a full-page list of fake contacts, and a dialog box containing a chat window.

Both of these areas scroll; normally if you scrolled the chat window until you hit a scroll boundary, the underlying contacts window would start to scroll too, which is not desirable. This can be stopped using overscroll-behavior-y ( overscroll-behavior would also work) on the chat window, like this:

We also wanted to get rid of the standard overscroll effects when the contacts are scrolled to the top or bottom (e.g. Chrome on Android refreshes the page when you scroll past the top boundary). This can be prevented by setting overscroll-behavior: none on the <html> element:

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• Take control of your scroll: customizing pull-to-refresh and overflow effects on developer.chrome.com (2017)

How to Easily Disable Smooth Scrolling on Safari for Mac

Learn about smooth scrolling on Mac

Enable and Access Safari Debug Menu via Terminal command

Disable Smooth Scrolling and hide debug menu using Terminal.

Apple introduced smooth scrolling on Mac with Safari 16.4 Usually, the scrolling seems jittery when you use arrow keys and try to access a large webpage. Smooth scrolling tries to fix this by continuously scrolling until a key is released. Or you have to press the mouse button to stop the scrolling. Many have reported that smooth scrolling causes eye strain and difficulty in focusing. Let us learn how to turn off smooth scrolling on macOS.

Unfortunately, there is no native way to disable smooth scrolling. Either you are stuck with it or follow the steps in this article to disable smooth scrolling. The feature is automatically activated when you keep pressing the up or down arrow mark.

I have noticed that smooth scrolling often interferes with other functions. For instance, the gesture stops working when you access multiple pages with smooth scrolling. I only wished Apple had added a checkbox to turn off this feature on Safari.

How to Disable Smooth Scrolling

The solution to this problem lies in multiple parts. Firstly, you need full disk access for the Terminal. It is required as you have to unhide Safari’s hidden debug menu. Once done, turn off smooth scrolling using the debug menu. It might seem overwhelming, but the steps are simple and easy to follow.

1. Enable Full Disk Access

Time needed:  3 minutes

For the sake of convenience, we have segregated the solution into different sections.

2. Open and Access the Safari Debug Menu

1. Close Safari browser if open.

2. Open the Terminal app. Head over to Applications>Utilities .

3. Copy and paste the command below. Ensure that there is no white space or typo. Once done, press Return.

defaults write com.apple.Safari IncludeInternalDebugMenu -bool true

Kudos! You have enabled full disk access and successfully opened the Safari debug menu. In the next part, you must turn off smooth scrolling using the debug menu.

3. Disable Smooth Scrolling on Safari

With the help of Terminal, you can change hidden Safari settings. Let us use this method to turn off smooth scrolling on Mac. Quit Terminal and open Safari.

Select Debug>Webkit Internal Features> EventHandlerdriven smooth keyboard scrolling from the debug menu. Ensure that the checkmark is removed. Now, by default, the debug menu stays on the Safari browser.

However, you can disable or hide it using the following Terminal command.

defaults write com.apple.Safari IncludeInternalDebugMenu -bool false

Note that hiding the Safari debug menu will not affect any settings. The only thing is you cannot alter them.

Some features like Smooth scroll are polarising in nature. Users should have the option to turn such features on or off. You can disable Smooth scrolling on Mac by following the steps above. Did you know Safari lets you download videos on iPhone and iPad ? Check out other hidden features in the debug menu, and let us know which is your favorite in the comments below.

Leave a Reply Cancel reply

You must be logged in to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed .

• Mahit Huigol

• William Lim
• Aug 15, 2018

Scroll Bouncing On Your Websites

• 11 min read
• Tools , CSS , Techniques
• Share on Twitter ,  LinkedIn

About The Author

William Lim builds websites, games, mobile apps, and other applications. He has worked as a web developer and programmer in both corporate and startup working … More about William ↬

Email Newsletter

Weekly tips on front-end & UX . Trusted by 200,000+ folks.

Scroll bouncing (also sometimes referred to as scroll ‘rubber-banding’, or ‘elastic scrolling’) is often used to refer to the effect you see when you scroll to the very top of a page or HTML element, or to the bottom of a page or element, on a device using a touchscreen or a trackpad, and empty space can be seen for a moment before the element or page springs back and aligns itself back to its top/bottom (when you release your touch/fingers). You can see a similar effect happen in CSS scroll-snapping between elements.

However, this article focuses on scroll bouncing when you scroll to the very top or very bottom of a web page. In other words, when the scrollport has reached its scroll boundary .

Collecting Data, The Powerful Way

Did you know that CSS can be used for collecting statistics? Indeed, there's even a CSS-only approach for tracking UI interactions using Google Analytics. Read a related article →

A good understanding of scroll bouncing is very useful as it will help you to decide how you build your websites and how you want the page to scroll.

Scroll bouncing is undesirable if you don’t want to see fixed elements on a page move. Some examples include: when you want a header or footer to be fixed in a certain position, or if you want any other element such as a menu to be fixed, or if you want the page to scroll-snap at certain positions on scroll and you do not want any additional scrolling to occur at the very top or bottom of the page which will confuse visitors to your website. This article will propose some solutions to the problems faced when dealing with scroll bouncing at the very top or bottom of a web page.

My First Encounter With The Effect

I first noticed this effect when I was updating a website that I built a long time ago. You can view the website here . The footer at the bottom of the page was supposed to be fixed in its position at the bottom of the page and not move at all. At the same time, you were supposed to be able to scroll up and down through the main contents of the page. Ideally, it would work like this:

It currently works this way in Firefox or on any browser on a device without a touchscreen or trackpad. However, at that time, I was using Chrome on a MacBook. I was scrolling to the bottom of the page using a trackpad when I discovered that my website was not working correctly. You can see what happened here:

Oh no! This was not what was supposed to happen! I had set the footer's position to be at the bottom of the page by setting its CSS position property to have a value of fixed . This is also a good time to revisit what position: fixed; is. According to the CSS 2.1 Specification, when a “box” (in this case, the dark blue footer) is fixed, it is “fixed with respect to the viewport and does not move when scrolled.” What this means is that the footer was not supposed to move when you scroll up and down the page. This was what worried me when I saw what was happening on Chrome.

To make this article more complete, I’ll show you how the page scrolls on both Mobile Edge, Mobile Safari and Desktop Safari below. This is different to what happens in scrolling on Firefox and Chrome. I hope this gives you a better understanding of how the exact same code currently works in different ways. It is currently a challenge to develop scrolling that works in the same way across different web browsers.

Searching For A Solution

One of my first thoughts was that there would be an easy and a quick way to fix this issue on all browsers. What this means is that I thought that I could find a solution that would take a few lines of CSS code and that no JavaScript would be involved. Therefore, one of the first things I did, was to try to achieve this. The browsers I used for testing included Chrome, Firefox and Safari on macOS and Windows 10, and Edge and Safari on iOS. The versions of these browsers were the latest at the time of writing this article (2018).

HTML And CSS Only Solutions

Absolute and relative positioning.

One of the first things I tried, was to use absolute and relative positioning to position the footer because I was used to building footers like this. The idea would be to set my web page to 100% height so that the footer is always at the bottom of the page with a fixed height, whilst the content takes up 100% minus the height of the footer and you can scroll through that. Alternatively, you can set a padding-bottom instead of using calc and set the body-container height to 100% so that the contents of the application do not overlap with the footer. The CSS code looked something like this:

This solution works in almost the same way as the original solution (which was just position: fixed; ). One advantage of this solution compared to that is that the scroll is not for the entire page, but for just the contents of the page without the footer. The biggest problem with this method is that on Mobile Safari, both the footer and the contents of the application move at the same time. This makes this approach very problematic when scrolling quickly:

Another effect that I did not want was difficult to notice at first, and I only realized that it was happening after trying out more solutions. This was that it was slightly slower to scroll through the contents of my application. Because we are setting our scroll container’s height to 100% of itself, this hinders flick/momentum-based scrolling on iOS. If that 100% height is shorter (for example, when a 100% height of 2000px becomes a 100% height of 900px), the momentum-based scrolling gets worse. Flick/momentum-based scrolling happens when you flick on the surface of a touchscreen with your fingers and the page scrolls by itself. In my case, I wanted momentum-based scrolling to occur so that users could scroll quickly, so I stayed away from solutions that set a height of 100%.

Other Attempts

One of the solutions suggested on the web, and that I tried to use on my code, is shown below as an example.

This code works on Chrome and Firefox on macOS the same way as the previous solution. An advantage of this method is that scroll is not restricted to 100% height, so momentum-based scrolling works properly. On Safari, however, the footer disappears:

On iOS Safari, the footer becomes shorter, and there is an extra transparent (or white) gap at the bottom. Also, the ability to scroll through the page is lost after you scroll to the very bottom. You can see the white gap below the footer here:

One interesting line of code you might see a lot is: -webkit-overflow-scrolling: touch; . The idea behind this is that it allows momentum-based scrolling for a given element. This property is described as “non-standard” and as “not on a standard track” in MDN documentation. It shows up as an “Invalid property value” under inspection in Firefox and Chrome, and it doesn’t appear as a property on Desktop Safari. I didn’t use this CSS property in the end.

To show another example of a solution you may encounter and a different outcome I found, I also tried the code below :

This actually works well across the different desktop browsers, momentum-based scrolling still works, and the footer is fixed at the bottom and does not move on desktop web browsers. Perhaps the most problematic part of this solution (and what makes it unique) is that, on iOS Safari the footer always shakes and distorts very slightly and you can see the content below it whenever you scroll.

Solutions With JavaScript

After trying out some initial solutions using just HTML and CSS, I gave some JavaScript solutions a try. I would like to add that this is something that I do not recommend you to do and would be better to avoid doing. From my experience, there are usually more elegant and concise solutions using just HTML and CSS. However, I had already spent a lot of time trying out the other solutions, I thought that it wouldn’t hurt to quickly see if there were some alternative solutions that used JavaScript.

Touch Events

One approach of solving the issue of scroll bouncing is by preventing the touchmove or touchstart events on the window or document . The idea behind this is that the touch events on the overall window are prevented, whilst the touch events on the content you want to scroll through are allowed. An example of code like this is shown below:

I tried many variations of this code to try to get the scroll to work properly. Preventing touchmove on the window made no difference. Using document made no difference. I also tried to use both touchstart and touchmove to control the scrolling, but these two methods also made no difference. I learned that you can no longer call event.preventDefault() this way for performance reasons. You have to set the passive option to false in the event listener:

You may come across a library called “iNoBounce” that was built to “stop your iOS webapp from bouncing around when scrolling.” One thing to note when using this library right now to solve the problem I’ve described in this article is that it needs you to use -webkit-overflow-scrolling . Another thing to note is that the more concise solution I ended up with (which is described later) does a similar thing as it on iOS. You can test this yourself by looking at the examples in its GitHub Repository , and comparing that to the solution I ended up with.

Overscroll Behavior

After trying out all of these solutions, I found out about the CSS property overscroll-behavior . The overscroll-behavior CSS property was implemented in Chrome 63 on December 2017 , and in Firefox 59 on March 2018 . This property , as described in MDN documentation, “allows you to control the browser's scroll overflow behavior — what happens when the boundary of a scrolling area is reached.” This was the solution that I ended up using.

All I had to do was set overscroll-behavior to none in the body of my website and I could leave the footer’s position as fixed . Even though momentum-based scrolling applied to the whole page, rather than the contents without the footer, this solution was good enough for me and fulfilled all of my requirements at that point in time, and my footer no longer bounced unexpectedly on Chrome. It is perhaps useful to note that Edge has this property flagged as under development now. overscroll-behavior can be seen as an enhancement if browsers do not support it yet.

If you don’t want your fixed headers or footers to bounce around on your web pages, you can now use the overscroll-behavior CSS property.

Despite the fact that this solution works differently in different browsers (bouncing of the page content still happens on Safari and Edge, whereas on Firefox and Chrome it doesn’t), it will keep the header or footer fixed when you scroll to the very top or bottom of a website. It is a concise solution and on all the browsers tested, momentum-based scrolling still works, so you can scroll through a lot of page content very quickly. If you are building a fixed header or footer on your web page, you can begin to use this solution.

Further Reading

• CSS Blurry Shimmer Effect
• New CSS Viewport Units Do Not Solve The Classic Scrollbar Problem
• Top Front-End Tools Of 2023
• How To Draw Radar Charts In Web

Smashing Newsletter

Tips on front-end & UX, delivered weekly in your inbox. Just the things you can actually use.

Front-End & UX Workshops, Online

With practical takeaways, live sessions, video recordings and a friendly Q&A.

TypeScript in 50 Lessons

Everything TypeScript, with code walkthroughs and examples. And other printed books.

Apple’s Worldwide Developers Conference to kick off June 10 at 10 a.m. PDT with Keynote address

The Keynote will be available to stream on  apple.com , the Apple Developer app, the Apple TV app, and the Apple YouTube channel. On-demand playback will be available after the conclusion of the stream.

How to disable bouncing/elastic scroll

Bouncing or elastic scrolling has to be the single most annoying feature of MacOS. Why anyone thought it was a good idea to bounce things into view, then bounce them out again is beyond me.

Is there any way to disable this? I've read How to Disable Elastic Scrolling but none of the answers there disable it in Mac OS 13.3.1.

MacBook Pro 13″, macOS 13.3

Posted on May 4, 2023 5:37 AM

Similar questions

• How to Disable Elastic Scrolling I am looking for a way to disable elastic scrolling in Mac OS. For me, the scroll bounce is distracting and pointless. I have searched countless forums and articles which seem to elude that this was once an option but I cannot find any way to disable this behavior in modern versions of Mac OS. The overflow scrolling is disrupting my experience in the browser and other areas of the OS. I am really hoping that there are options that I have not yet found. 2805 7
• Scroll "bouncing" or "jiggling" in Big Sur. How do I turn off? So, I've known that there's always been a kind of a bounce when scrolling in previous OS versions as well, but now for example in Big Sur's updated Messages app, there's an awful like jiggle or bounce to all the individual messages when you scroll, and when scrolling quickly through them, it creates a terrible lag, and it's dreadful. Is there a way to turn that effect off? I would assume it would have been in accessibility like turning off motion enhancement on iPhone, but I don't see it anywhere. 1663 4
• Scrollbar in browsers sometimes not visible although "always" activated in settings Hi there! I activated "always" in the scrollbar settings in OS Ventura. Mostly the scrollbar is visible in the browser. But sometimes on some websites it´s hidden. I use a Wacom tablet and always scroll via the scrollbar – mostly use Brave browser. The same problem are also in other browsers like Safari. Does anyone has an idea how to solve this? 241 14

Loading page content

Page content loaded

May 4, 2023 5:45 AM in response to ozRob

Have you tried this solution?

Edited.....I see you did so I removed my link.

May 4, 2023 6:09 AM in response to ozRob

FWIW, probably a terrible workaround but I have two different wired under $10 three button mice, one button being a scroll wheel, and neither bounces at the ends of a scroll bar.

How to disable smooth scrolling when pressing the arrow keys in Safari for Mac

Did you know you can disable smooth scrolling in the Safari browser on your Mac? Doing so lets you scroll pages line by line with the arrow keys on your keyboard.

Apple added support for smooth webpage scrolling to Safari 16.4, which was released for macOS Monterey and Big Sur. This behavior is also present in Safari for macOS Sonoma, the latest Mac operating system.

With some digging, you can revert to scrolling pages line by line when pressing directional arrow keys on the keyboard. For that to happen, you’ll need to tick off a setting in Safari’s hidden Debug menu, as instructed in this tutorial.

How to disable smooth scrolling in Safari for Mac

To stop Safari’s smooth scrolling behavior, you must toggle an option in Safari’s hidden Debug menu. But first, you must reveal the menu if you haven’t already. You can do so through Terminal, but you’ll need to give the Terminal app permission to access the whole file system on your Mac.

1. Enable Full Disk Access for Terminal

Click the Apple menu and choose System Settings , then select Privacy & Security in the sidebar and click Full Disk Access on the right. Next, slide the switch next to Terminal to the ON position. If Terminal isn’t listed, click the + (Add) icon, navigate to the Applications/Utilities folder on your Mac and double click the Terminal app.

If asked, authenticate with Touch ID, your macOS password or your Apple Watch.

2. Reveal Safari’s hidden Debug menu

With that done, we can now turn on Safari’s hidden Debug menu. Open Terminal from the Applications/Utilities folder, paste the following command into the Terminal window and press Return or Enter to execute it:

With the Debug menu turned on in Safari, we can proceed to the final step.

3. Turn smooth scrolling off

Now open Safari , click the Debug menu and select WebKit Internal Features > EventHandler driven smooth keyboard scrolling . Doing so should remove the checkmark from the option, deactivating smooth scrolling.

With smooth scrolling disabled, pressing an arrow key on the keyboard will no longer scroll a page continuously until you release the key. Instead, the page will move one line at a time.

To reactivate smooth scrolling, toggle the Debug menu option to add a checkmark. When done, you can safely hide the Debug menu again with this Terminal command:

Hiding the Debug menu will not change your smooth scrolling setting.

Which scrolling type are you: Smooth or jumpy?

Smooth scrolling isn’t a biggie as long as you don’t use the arrow keys. But if you’re like me and prefer to scroll an article one line or page at a time using the keyboard, you may want to switch back to the good ol’ jumpy scrolling method.

It would’ve been far better had Apple put this toggle in the Safari preferences, so we could change the scrolling type with a simple checkbox instead of digging through hidden menus. Be that as it may, now you at least have the option to change Safari’s scrolling method in case you’re not a fan of smooth scrolling.

Other Safari tutorial to check out

• How to add or remove your credit cards in Safari on iPhone, iPad or Mac
• How to show the full URL in Safari’s address bar on your Mac
• How to download videos from Safari on iPhone and iPad
• How to use profile in Safari for iPhone, iPad and Mac
• How to pin tabs in Safari on iPhone, iPad and Mac

overscroll-behavior

The overscroll-behavior CSS property controls whether an element will use “scroll chaining” or not. You have likely experienced this behavior before and perhaps took it for granted that scrolling works like this on the web! If you are inside of an element that has its own scrolling (say it’s vertical) and you have scrolled down to the bottom of it, then by default, the next parent element up (maybe the page itself) starts to scroll in that direction. If you don’t want that default, overscroll-behavior is what controls it.

In other words, it specifies how the browser behaves when reaching the boundary of a scrolling area.

overscroll-behavior is a shorthand for overscroll-behavior-x and overscroll-behavior-y and it is defined in the CSS Overscroll Behavior Module Level 1 Specification which is currently in Editor’s Draft status.

Scroll chaining and overscroll affordances

Scroll chaining is when scrolling is propagated from one scroll container to an ancestor scroll container. You can see this effect in following video:

As you can see, once the list box’s scroll boundary is reached, the container behind it starts to scroll and then the underlying page follows the scroll chain as well.

Overscroll affordance is stuff like the overscroll glow effect on Android or the rubber-banding effect on iOS , both of which serve as a visual indicator that the user has hit a scroll boundary. You may also see other implementations in the wild, like a “bounce” effect on mobile browsers or a page refresh when the top or bottom of a page is reached.

• Initial value: auto
• Applies to: non-replaced block-level elements and non-replaced inline-block elements
• Inherited: no
• Percentages: n/a
• Computed value: as each of the properties of the shorthand
• Animation type: discrete
• auto : The default value. Specifies that the browser should perform the default boundary action, and makes it possible for the user to continue scrolling through a parent scroll area when the boundary of the primary scroll area has been reached. In other words, it allows scroll chaining and overscroll affordances.
• contain : Prevents scroll chaining. Scrolls do not propagate to ancestors (the other elements in a parent container) but preserve overscroll affordances like “bounce” effects when scrolling past the end of the container in operating systems that support it.
• none : Prevents scroll chaining and also prevents overscroll affordances. So, you won’t get that Android overscroll glow or iOS rubber-banding effect.
• initial : Applies the property’s default setting, which is auto .
• inherit : Adopts the overscroll-behavior value of the parent.
• unset : Removes the current overscroll-behavior from the element.

Constituent properties

We mentioned it earlier, but over scroll-behavior is shorthand for two other CSS properties, which call the “constituent properties” of the shorthand. Let’s look at those individually.

overscroll-behavior-x

As the name suggests, the overscroll-behavior-x CSS property allows you to control the browser’s behavior when the horizontal boundary of a scrolling area is reached. So, where we can control both the horizontal and vertical over scroll behavior with overscoll-behavior alone, overscroll-behavior-x only controls the behavior in the left and right direction.

In the following demo, you can see the different behavior of browser when the value of overscroll-behavior-x is contain :

See that? When contain overscroll behavior is turned off, the whole page starts to scroll once you reach the horizontal (left and right)) scrolling boundary.

overscroll-behavior-y

The overscroll-behavior-y CSS property is just like overscroll-behavior-x but it controls the browser’s behavior when the vertical boundary of a scrolling area is reached. So, we’re talking about the top and bottom direction this time.

overscroll-behavior-inline

The overscroll-behavior-inline CSS property allows you to control the browser’s behavior when the inline direction boundary of a scrolling area is reached.

overscroll-behavior-inline is a CSS logical property that corresponds to the overscroll-behavior-x of an element when the writing-mode is horizontal, or the overscroll-behavior-y of the element when the writing-mode is vertical.

overscroll-behavior-block

The overscroll-behavior-block CSS property allows you to control the browser’s behavior when the block direction boundary of a scrolling area is reached.

overscroll-behavior-block is a CSS logical property that corresponds to the overscroll-behavior-y of an element when the writing-mode is horizontal, or the overscroll-behavior-x of the element when the writing-mode is vertical.

Wanna see a few examples of overscroll-behavior in action? Of course you do!

Disabling the pull-to-refresh feature

Once the pull-to-refresh effect got very popular, mobile browsers, including Chrome on Android, implemented it as well. Swiping down at the top of the page refreshes the entire page.

As useful as this gesture is, sometimes you want to create your own pull-to-refresh effect, and need to disable the browser’s native overscroll action. We can make that happen by preventing scroll chaining on <html> or <body> :

This also prevents overscroll navigation actions.

Disabling overscroll glow and rubber-banding effects

Setting the contain value doesn’t remove these effects. For this to work, we need to use the none value, which also disables the pull-to-refresh and overscroll navigation actions.

You might also want to use this with infinite scrolling. It might be confusing when a user reaches the bottom of page, gets a rubber-banding effect, then more content loads.

Preventing page content from scrolling underneath a modal or a fixed side navigation

Consider a side navigation with a large number of items — so many that the height of the navigation exceeds the page height and the user has to scroll down to see all of the menu items.

The overflow container stops scrolling when they reach the bottom, but if the user keeps scrolling, the rest of the content outside the navigation container starts scrolling as well.

Using contain keyword prevents this:

We can use the same approach for modals:

Browser support

This browser support data is from Caniuse , which has more detail. A number indicates that browser supports the feature at that version and up.

Mobile / Tablet

More information.

• CSS Overscroll Behavior Module Level 1

I just learned about this CSS property. Total game changer! I feel like this is going to create a much more natural user experience.

I am looking for a solution to stop rubber band effect but keep the scroll chaining. Does anyone know a solution?

Awesome, until you’re trying to prevent it on iOS… Anyone found a workaround ?

Is there any polyfill available for this property? Apparently, Apple is not focusing on implementing new web APIs and CSS properties. Polyfills help tackle their ignorance in the most natural way possible imho.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Copy and paste this code: micuno *

Leave this field empty

How to prevent bounce/elastic scroll in iOS prior to v16?

Hi! As I understand it, since Safari 16 it is finally possible to suppress the bounce/elastic/rubberband scrolling with CSS overscroll-behavior.

But how can I achieve this in older versions of iOS/Safari? Like, at least, v15? Isn’t there any way to configure the web view component itself?

Thanks a lot!

DEV Community

Posted on Jan 14, 2020 • Updated on Jan 28, 2020

Handling Overscroll in a Web App with Header and Footer on iOS

Introduction.

Web pages, originally designed as documents, want to scroll. And since at least the iPhone, web pages can "overscroll" beyond their bounds, based on touch gesture inertia. In fact, every scrollable area on a web page viewed on an iPhone gets this extra "bouncy" scrolling behavior.

Nested scrollable areas "chain" with their parents (including the page itself), so that if you reach the top of a nested scrollable area, the closest scrollable parent will take over scrolling.

However, some app-like web experiences may wish to opt-out of this document-flow/scroll-chaining paradigm. They need to present a fixed scrollable main content area with a fixed header and footer, which goes against the browser's nature.

The main content area, if scrolled, could trigger the entire page to start scrolling unexpectedly. Or, if the page is fixed positioned, nothing will happen and the user will get "trapped" scrolling an unscrollable web page for a few seconds.

To opt out of this paradigm in any browser except Safari, you can use a new CSS property called overscroll-behavior . Setting overscroll-behavior: contain will prevent scroll chaining.

Handling iOS Safari

Polyfilling this CSS property in Safari is pretty tricky.

For non-scrollable elements, you can prevent scroll chaining by simply turning off touch gestures. You can do that with a CSS property that is supported by Safari: touch-action: none .

But for scrollable elements, JavaScript will be required.

Remember that scroll chaining occurs when you reach the bounds of the element. So we need to ensure that the user is never able to fully scroll to the top or bottom. Doing this the wrong way can cause UX problems, because the user will clearly be fighting against the default inertia scroll.

So here's the trick:

• Create an inner element that is at least 3px taller than the size of its scrolling parent, to force the area to get the overscroll behavior.
• Immediately set the scroll position to 1px to prevent scroll chaining when scrolling up
• With JavaScript, catch when the scroll position is exactly 0 or exactly at the bottom. After a requestAnimationFrame , set the scroll position to 1px from either the top or bottom.

The container will still get the inertia scroll (the user won't have to fight it) but it won't trigger scroll chaining.

Here's the JavaScript function I have:

Integrating this into an already-existing app probably won't be easy, since this may necessitate restructuring a lot of the page.

Hopefully Safari will implement the overscroll-behavior CSS property soon, so we can avoid this mess!

Here's the WebKit issue:

https://bugs.webkit.org/show_bug.cgi?id=176454

If you've ever faced this challenge, add yourself to the CC list on that issue to indicate that this is important to you.

Top comments (1)

Templates let you quickly answer FAQs or store snippets for re-use.

• Joined Dec 3, 2018

crazy how little info there is on this issue... been bugging me for years lol

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Creating a deep copy of a JS Object

Keertivaas S - Jun 1

The most aesthetic linux distribution - Garuda Linux! 🎨

Nikola Perišić - Jun 2

Gallery APP

Sudhanshu Ambastha - Jun 2

10+ Essential JavaScript Functions to Streamline Your Code | JavaScript Guide

Ahsan Iftikhar - May 31

We're a place where coders share, stay up-to-date and grow their careers.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Disable "scroll-bounce" on Safari #943

sh0rez commented Aug 29, 2019

• 👍 4 reactions

sr229 commented Sep 12, 2019

Sorry, something went wrong.

sh0rez commented Sep 12, 2019

• 🎉 1 reaction

damianobarbati commented Jan 1, 2020 • edited

• 👀 2 reactions

sh0rez commented Jan 1, 2020

jens1101 commented Sep 18, 2020

• 👍 3 reactions

No branches or pull requests

Scroll-bounce page background colour

Posted 24th January 2021 in CSS

There’s a nice feature in Safari and Chrome (and any Chromium-based browser, like Edge and Opera) where, if you scroll up or down the page and hit the top or bottom, there’s a satisfying bounce, rather than an abrupt stop.

The bounce reveals a white background behind the main page canvas, but that’s a bit boring so let’s have a look at adding our own colourful flourish to our visitors scrolling.

I’d love to tell you it was as simple as this:

Actually, dealing with it cleanly in the CSS like this, with no extra HTML works well Chromium-based browsers, but you’re going to want the same effect on Safari so that everyone using iOS can enjoy your blue background too.

On Safari (on macOS and iOS), if the <body> element has a background-color , that’s what’s seen on the bounce, so in the above example, the background-color of the <body> is both the canvas and its background. The blue background of the <html> is ignored. Annoying.

So we need a separate canvas element that sits on top of both <html> and <body> :

And the CSS will look like this:

Now, with a little extra HTML, anyone using Chrome or Safari will see a white page with a hidden blue background that peeks out when they scroll to the top or bottom of the page.

Accessibility in your inbox

I send an accessibility-centric newsletter on the last day of every month, containing:

• A roundup of the articles I’ve posted
• A hot pick from my archives
• Some interesting posts from around the web

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list .

Accessibility overlays are not for disabled people

Those little accessibility widgets you see on some websites are absolutely not for who you think they are.

Images as the first thing in a button or link

If the text of an interactive element like a button or link is preceded with an accessible image, we’ve probably got an accessibility problem.

• Español – América Latina
• Português – Brasil
• Tiếng Việt
• Chrome for Developers

Take control of your scroll - customizing pull-to-refresh and overflow effects

The CSS overscroll-behavior property allows developers to override the browser's default overflow scroll behavior when reaching the top/bottom of content. Use cases include disabling the pull-to-refresh feature on mobile, removing overscroll glow and rubberbanding effects, and preventing page content from scrolling when it's beneath a modal/overlay.

Scroll boundaries and scroll chaining

Scrolling is one of the most fundamental ways to interact with a page, but certain UX patterns can be tricky to deal with because of the browser's quirky default behaviors. As an example, take an app drawer with a large number of items that the user may have to scroll through. When they reach the bottom, the overflow container stops scrolling because there's no more content to consume. In other words, the user reaches a "scroll boundary". But notice what happens if the user continues to scroll. The content behind the drawer starts scrolling ! Scrolling is taken over by the parent container; the main page itself in the example.

Turns out this behavior is called scroll chaining ; the browser's default behavior when scrolling content. Oftentimes the default is pretty nice, but sometimes it's not desirable or even unexpected. Certain apps may want to provide a different user experience when the user hits a scroll boundary.

The pull-to-refresh effect

Pull-to-refresh is an intuitive gesture popularized by mobile apps such as Facebook and Twitter. Pulling down on a social feed and releasing creates new space for more recent posts to be loaded. In fact, this particular UX has become so popular that mobile browsers like Chrome on Android have adopted the same effect. Swiping down at the top of the page refreshes the entire page:

For situations like the Twitter PWA , it might make sense to disable the native pull-to-refresh action. Why? In this app, you probably don't want the user accidentally refreshing the page. There's also the potential to see a double refresh animation! Alternatively, it might be nicer to customize the browser's action, aligning it more closely to the site's branding. The unfortunate part is that this type of customization has been tricky to pull off. Developers end up writing unnecessary JavaScript, add non-passive touch listeners (which block scrolling), or stick the entire page in a 100vw/vh <div> (to prevent the page from overflowing). These workarounds have well-documented negative effects on scrolling performance.

We can do better!

Introducing overscroll-behavior

The overscroll-behavior property is a new CSS feature that controls the behavior of what happens when you over-scroll a container (including the page itself). You can use it to cancel scroll chaining, disable/customize the pull-to-refresh action, disable rubberbanding effects on iOS (when Safari implements overscroll-behavior ), and more. The best part is that using overscroll-behavior does not adversely affect page performance like the hacks mentioned in the intro!

The property takes three possible values:

• auto - Default. Scrolls that originate on the element may propagate to ancestor elements.
• contain - prevents scroll chaining. Scrolls do not propagate to ancestors but local effects within the node are shown. For example, the overscroll glow effect on Android or the rubberbanding effect on iOS which notifies the user when they've hit a scroll boundary. Note : using overscroll-behavior: contain on the html element prevents overscroll navigation actions.
• none - same as contain but it also prevents overscroll effects within the node itself (e.g. Android overscroll glow or iOS rubberbanding).

Let's dive into some examples to see how to use overscroll-behavior .

Prevent scrolls from escaping a fixed position element

The chatbox scenario.

Consider a fixed positioned chatbox that sits at the bottom of the page. The intention is that the chatbox is a self-contained component and that it scrolls separately from the content behind it. However, because of scroll chaining, the document starts scrolling as soon as the user hits the last message in the chat history.

For this app, it's more appropriate to have scrolls that originate within the chatbox stay within the chat. We can make that happen by adding overscroll-behavior: contain to the element that holds the chat messages:

Essentially, we're creating a logical separation between the chatbox's scrolling context and the main page. The end result is that the main page stays put when the user reaches the top/bottom of the chat history. Scrolls that start in the chatbox do not propagate out.

The page overlay scenario

Another variation of the "underscroll" scenario is when you see content scrolling behind a fixed position overlay . A dead giveaway overscroll-behavior is in order! The browser is trying to be helpful but it ends up making the site look buggy.

Example - modal with and without overscroll-behavior: contain : Before : page content scrolls beneath overlay. After : page content doesn't scroll beneath overlay.

Disabling pull-to-refresh

Turning off the pull-to-refresh action is a single line of CSS . Just prevent scroll chaining on the entire viewport-defining element. In most cases, that's <html> or <body> :

With this simple addition, we fix the double pull-to-refresh animations in the chatbox demo and can instead, implement a custom effect which uses a neater loading animation. The entire inbox also blurs as the inbox refreshes: Before After

Here's a snippet of the full code :

Disabling overscroll glow and rubberbanding effects

To disable the bounce effect when hitting a scroll boundary, use overscroll-behavior-y: none :

Putting it all together, the full chatbox demo uses overscroll-behavior to create a custom pull-to-refresh animation and disable scrolls from escaping the chatbox widget. This provides an optimal user experience that would have been tricky to achieve without CSS overscroll-behavior .

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2017-11-14 UTC.