Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Deactivate body's scrolling but keep scroll bar

Tags:

html

css

scroll

How do I disable body's scroll bar, but let it stay visible on screen? As an example see facebook's theatre mode:

facebook screen

like image 523
lucas clemente Avatar asked Jul 04 '12 23:07

lucas clemente


People also ask

How do I stop scrolling without scrollbar hiding?

Disabling scroll with only CSS. There's another way to disable scrolling that is commonly used when opening modals or scrollable floating elements. And it is simply by adding the CSS property overflow: hidden; on the element you want to prevent the scroll.

How do I make my scrollbar invisible but still scroll?

Hide Scrollbars But Keep Functionality IE and Edge supports the -ms-overflow-style: property, and Firefox supports the scrollbar-width property, which allows us to hide the scrollbar, but keep functionality.

How do I get rid of body scroll?

scrolling = 'no'; or set the scrolling="no" attribute in your iframe's tag: <iframe src="some_url" scrolling="no"> . Save this answer.


1 Answers

This is the only CSS you will ned to force the scrollbars:

html{
    overflow-y: scroll;
}

The scrollbars will be disabled if the content is smaller than the window, so you will have to use some script to resize the body to be at least 1px less then the window height:

$("body").css({ "height" : ($(window).height() - 1) + 'px', "overflow": "hidden" });
like image 191
Ricardo Souza Avatar answered Oct 02 '22 05:10

Ricardo Souza