Prevent viewport scroll bounce effect

If you are on iOS or macOS you probably would like an easy enough option to switch off its scroll bounce effect in browsers 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 overscroll of the viewport like top only, etc. this way. Requires some JavaScript.

Mar 11, 2025 - 14:32

If you are on iOS or macOS you probably would like an easy enough option to switch off its scroll bounce effect in browsers 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 overscroll of the viewport like top only, etc. this way. Requires some JavaScript.