19

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?

16
  • 2
    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
    Commented Nov 21, 2019 at 14:14
  • Try this solution. It might work. bram.us/2016/05/02/…
    – MTBthePRO
    Commented Nov 21, 2019 at 21:36
  • @MartinBarker unfortunately scroll-snap-type doesn't change the "overscroll" behavior...
    – Ood
    Commented Nov 23, 2019 at 16:58
  • @MTBthePRO This solution also no longer works...
    – Ood
    Commented Nov 23, 2019 at 16:59
  • @Ood Did you find any solution? Please share.
    – VAdaihiep
    Commented Dec 17, 2019 at 7:13

5 Answers 5

15

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.

0
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;
}
1
  • 1
    I have tried this and unfortunately it doesn't work anymore. :(
    – Ood
    Commented Nov 25, 2019 at 15:37
2
+200

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

1
  • Great, your answer help me. Thank you Commented Feb 7, 2022 at 4:47
0

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 :

2
  • Unfortunately -webkit-overflow-scrolling doesn’t seem to work anymore...
    – Ood
    Commented Nov 19, 2019 at 13:32
  • 1
    Found this, not sure if this is what you need but worth a try: github.com/lazd/iNoBounce
    – JolandaK
    Commented Nov 24, 2019 at 9:37
0

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".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.