Prevent viewport scroll bounce effect
Developing for iOS and macOS browsers you probably would like an easy enough option to switch off its over-scrolling bounce effect in all its directions. It's an easy trick actually with one line CSS only. body { overscroll-behavior: none; } If this somehow doesn't work, you can try a less graceful solution for that. html { overflow: hidden; height: 100%; position: fixed; } body { overflow: auto; height: 100%; position: relative; } There are options like overscroll-behavior-x and overscroll-behavior-y. Helpful. However it seems not possible to edit custom one-side or multiple-sides over-scroll of the viewport like top only, etc. Requires some JavaScript.
Developing for iOS and macOS browsers you probably would like an easy enough option to switch off its over-scrolling bounce effect in all its directions. It's an easy trick actually with one line CSS only.
body {
overscroll-behavior: none;
}
If this somehow doesn't work, you can try a less graceful solution for that.
html {
overflow: hidden;
height: 100%;
position: fixed;
}
body {
overflow: auto;
height: 100%;
position: relative;
}
There are options like overscroll-behavior-x and overscroll-behavior-y. Helpful. However it seems not possible to edit custom one-side or multiple-sides over-scroll of the viewport like top only, etc. Requires some JavaScript.
