How do you stop scrolling in CSS?

By Lexie Tanner 5 years ago

How do you stop scrolling in CSS?

Add overflow: hidden; to hide both the horizontal and vertical scrollbar.

  1. body { overflow: hidden; /* Hide scrollbars */ }
  2. body { overflow-y: hidden; /* Hide vertical scrollbar */ overflow-x: hidden; /* Hide horizontal scrollbar */
  3. /* Hide scrollbar for Chrome, Safari and Opera */ .example::-webkit-scrollbar {

How do I stop a page from scrolling in HTML?

Scrolling can be disabled using JavaScript using 2 methods:

  1. Method 1: Overriding the window.onscroll function.
  2. Syntax:
  3. Example: Overriding the window.onscroll function.
  4. Output:
  5. Method 2: Setting the height of the body to 100% and overflow to hidden.
  6. Syntax:

How do I stop scrolling?

If you’re hooked on the scroll, here are some helpful tips to break the addiction.

  1. Admit you have a problem.
  2. Turn off your notifications.
  3. Don’t sleep next to your phone.
  4. Put your phone in another room.
  5. In fact, leave your phone at home altogether.
  6. Turn on grayscale.
  7. Take the apps off your phone.
  8. Set boundaries.

Is there a way to prevent scrolling in Chrome 34?

In Chrome 34 this doesn’t really prevent scrolling. It hides the scrollbar, but with middle-button scrolling I can still see the hidden elements on the left. – gphilip

How to disable horizontal scrolling over the entire screen width?

If you want to disable horizontal scrolling over the entire screen width, use this code. element { max-width: 100vw; overflow-x: hidden; } This works better than “100%” because it ignores the parent width and instead uses the viewport.

Is there a way to disable Rubber Band scrolling?

Sometimes – in fullscreen apps for example – you’ll want to disable this. Now, there’s no need to resort to JavaScript and hijack touchstart, as the little CSS snippet below can prevent the rubber band scrolling: Tested with iOS8, iOS9, and iOS10. However, this snippet disables *all* scrolling on the body.

Is there a way to lock the body scroll?

Have a google of how people lock the body scroll and you’ll come across a few solutions to accomplish this. The basic use case is: Enable some targetElement to appear above the body with position: absolute. After it appears, use some solution to disable body scrolling so scrolling within the targetElement doesn’t scroll the body content.