DEV Community

Dev Ieffe
Dev Ieffe

Posted on Edited on

Prevention of scroll bounce effect

#css #ux

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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 e.g. top only.

Requires some JavaScript.

Top comments (0)