Disable Elastic Scrolling Chrome/Safari

Question

This method does not work at all for me.

Is there any updated modern way of doing this?

My clients always hate it and I've yet to find a good way to disable it.

By elastic scrolling, I mean once you've reached the top or bottom of the page, these browsers allow the page to "overscroll" to show a blank area. I'm trying to prevent this behavior.

Answer 1

If that CSS hack does not remove it in your case, then you will probably need to use JS to handle the scrolling.

I would strongly advise against this though, because users expect scrolling to behave a certain way. Not to mention it can be very difficult to get JS scrolling to be smooth and to be as responsive as native scrolling is.

I don't know what you are building so of course this may not apply to your case, but you should generally (as in, always, unless you have a compelling reason against it) leave common interactions like this up to the OS to avoid confusing the user. Your clients may not like it, but it is what their users are going to expect, and that should be more important.