Css: Disable Bounce Effect For Scroll On Ios 13

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; -web

Solution 1:

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', asynchandleScroll() {
  awaitnewPromise(resolve =>window.requestAnimationFrame(resolve))
  const {
    scrollTop,
    scrollLeft,
    scrollHeight,
    clientHeight
  } = thisconst atTop = scrollTop === 0const beforeTop = 1const atBottom = scrollTop === scrollHeight - clientHeight
  const beforeBottom = scrollHeight - clientHeight - 1if (atTop) {
    this.scrollTo(scrollLeft, beforeTop) 
  } elseif (atBottom) {
    this.scrollTo(scrollLeft, beforeBottom)
  }
}

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

Solution 2:

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;
}

Solution 3:

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 :