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.