Disable bounce and rubber band scroll in Safari and iOS

Hi!

My project share link

How do I disable scroll and pull bouncing and rubber band effect at the top and bottom of the page?

I’ve tried this code, but it only worked for me in Chrome on Desktop but not in Safari. Another disadvantage is that it disables pull to refresh gesture on Android.

This is a perfect example of what I’d love to achieve https://www.eckharttolle.com/ , no bouncing, no rubber band effect upon pull, but pull to refresh still works on mobile.

Thanks in advance.

<style>
html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  padding: 0;
  overflow: auto;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}
</style>

Disable elastic scrolling in Safari

ipad safari: disable scrolling, and bounce effect?

None of that worked on desktop Safari unfortunately, these answers are 6 years old.

were you able to find a definitive solution?

I tried inobounce script - it works but it makes all IX2animations super glitchy so I am still looking for a solution… let me know if you found something usefull…

Unfortunately no, there was some solution which worked on desktop but also glitchy on mobile. So I gave up :slightly_frowning_face:

Typos courtesy of my phone,
Dmitry

have you tried inobounce?

No I think no, what’s that ?

its a javascript library that stops all elastic scroll - I am still testing it out but it might interfere with some IX2 interactions… but i am still hoping I might make it work… here, have a look…

2 Likes

You know, I just took the src from jsdeliver, and just enabled it on the page. I have a page on my site where it is supposed to be single page only with some sliders (made with swiperjs) and so far seems to be working pretty darn well… killed all elastic scrolling…

will continue testing…

1 Like

Hey IVG, I just added the , just that nothing else to my custom code head. Your right, it works pretty darn well :smiley: Thanks for the rec!

1 Like