CSS: Disable bounce effect for scroll on iOS 13

Question

In Safari 13 release notes it is stated that there is no longer the need to apply the following to an element to enable the bounce scroll effect:

div {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch; /* No longer needed */
}

However, I can now no longer disable this effect with the following code:

div {
  overflow-x: scroll;
  -webkit-overflow-scrolling: auto;
}

I need this for a carousel I am working on. Any idea on how to fix it?

have you tried adding `scroll-snap-type:none` I'm not sure if it will work but if the bounce is caused by scroll-snap that might stop it. — Barkermn01, Nov 21 '19 at 14:14
Try this solution. It might work. https://www.bram.us/2016/05/02/prevent-overscroll-bounce-in-ios-mobilesafari-pure-css/ — MTBthePRO, Nov 21 '19 at 21:36
@MartinBarker unfortunately scroll-snap-type doesn't change the "overscroll" behavior... — Ood, Nov 23 '19 at 16:58
@VAdaihiep unfortunately not. None of the suggestions seem to work anymore... :-( — Ood, Dec 20 '19 at 17:27
can you share the problem on github, will try to debug these — antonio yaphiar, Dec 26 '19 at 19:45
@Jose Guzman the techniques used in iNoBounce don’t work anymore, as reported on the issues page. :( — Ood, Dec 27 '19 at 11:59
Has there been any progress on this issue? It seems to be causing PWA scrolling to freeze intermittently on iOS. — nivram80, Mar 11 '20 at 15:46
@nivram80 Unfortunately I have not found a fix that works yet. — Ood, Mar 14 '20 at 14:55
Does this answer your question? [Prevent iOS bounce without disabling scroll ability](https://stackoverflow.com/questions/29894997/prevent-ios-bounce-without-disabling-scroll-ability) — Zach Saucier, Jun 30 '20 at 13:58
I have similar need, but I need it because I have a scroll element inside another scroll element. This means that the anaimation of the bounce effect on the outer element is blocking possibility to scroll on the inner element. When I wait for the bouncing effect to stop, it is possible to scroll the inner element. But if the user is slightly impatient, it will be annoying and feel like a bug. It often result in user trying again and again, and for each time, it is triggering a new bounce on the outer scroll element to add additional delay to when the inner element is available for scrolling. — awe, Jan 31 '22 at 11:46
Can you share a minimum reproducible of your scenario? May be we can come up with a workaround. Feel free to add to the OP question. — the Hutt, Jan 31 '22 at 14:27

score 9 · Answer 1 · answered Jan 14 '23 at 17:34

css overscroll-behavior is now supported in iOS 16. If you are targeting > iOS 16 devices, to prevent bounce effect when content inside overflowing parent reaches start or end, add following CSS to the div with overflow : scroll

div {
  overscroll-behavior: none;
  overflow : scroll
}

Tested in iOS 16 and above.

score 3 · Answer 2 · answered Nov 25 '19 at 14:10

3

I think you should try to change that using the overflow property that in Safari blocks the bouncing scroll behaviour. To do that in the parent container of your scrolling div you have to set:

overflow: hidden;

and then in your div set something like this:

div {
  overflow: auto;
}

answered Nov 25 '19 at 14:10

bertonc96

772
2
13
24

1

I have tried this and unfortunately it doesn't work anymore. :( – Ood Nov 25 '19 at 15:37

score 2 · Accepted Answer · edited Feb 04 '22 at 17:25

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:

this.addEventListener('scroll', async handleScroll() {
  await new Promise(resolve => window.requestAnimationFrame(resolve))
  const {
    scrollTop,
    scrollLeft,
    scrollHeight,
    clientHeight
  } = this
  const atTop = scrollTop === 0
  const beforeTop = 1
  const atBottom = scrollTop === scrollHeight - clientHeight
  const beforeBottom = scrollHeight - clientHeight - 1

  if (atTop) {
    this.scrollTo(scrollLeft, beforeTop) 
  } else if (atBottom) {
    this.scrollTo(scrollLeft, beforeBottom)
  }
}

source: https://dev.to/mpuckett/the-holy-grail-web-app-shell-with-header-and-footer-for-iphone-549j

Great, your answer help me. Thank you – Thuan Nguyen Feb 07 '22 at 04:47 — Thuan Nguyen, Feb 07 '22 at 04:47

score 0 · Answer 4 · answered Mar 18 '23 at 16:38

Let me provide you with simple JS (with Jquery library) solution that helps for all major versions of iOS. When you capture that such situation happened on your page (your fixed div is scrolled on 0 from the top, but user is trying to scroll up (and this action cause the problem), use quick scroll of all the scrollable elements together with body and html, for example:

$('body').stop().animate({scrollTop:$('body').scrollTop()-0.5},0).animate({scrollTop:$('body').scrollTop()+0.5},0);
$('html').stop().animate({scrollTop:$('html').scrollTop()-0.5},0).animate({scrollTop:$('html').scrollTop()+0.5},0);

This solution works like a charm, scroll focus remains on div that "needed".

score -1 · Answer 5 · answered Nov 18 '19 at 23:34

-1

I don't know if i really understand this correct, but here it goes! :)

Can't you just remove that line of code from your file?

You could also try to write -webkit-overflow-scrolling: auto; !important

Hope this helped :

answered Nov 18 '19 at 23:34

someone

57
4

Unfortunately -webkit-overflow-scrolling doesn’t seem to work anymore... – Ood Nov 19 '19 at 13:32
1

Found this, not sure if this is what you need but worth a try: https://github.com/lazd/iNoBounce – JolandaK Nov 24 '19 at 09:37

CSS: Disable bounce effect for scroll on iOS 13

5 Answers5

Linked