CODEWITHSUNDEEP
javascriptjqueryhtmlcssdocument-body
GiS91
GiS91

Reputation: 175

Hide/remove scrollbar from <body> but allow scrolling

As per the title, is there a way to hide/remove the scrollbar from body (not a div, but the entire body) and keep the 'scrollable property' enabled? I've been trying different solutions in these days but nothing really worked.

Thank you in advance!

Upvotes: 4

Views: 12570

Answers (6)

wuzla
wuzla

Reputation: 81

-webkit- solution from Fabian Schultz worked great, I added: -ms-overflow-style:none; to hide scrollbar on IE. Scroll enabled, scrollbar hidden.

This is the complete CSS:

::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbar-button {
  display: none;
}

body {
  -ms-overflow-style:none;
}

Upvotes: 6

Fabian Schultz
Fabian Schultz

Reputation: 18546

In webkit browsers, you could use the scrollbar styling to "hide" it:

::-webkit-scrollbar {
  display: none;
}
::-webkit-scrollbar-button {
  display: none;
}

Example here.

Unfortunately this doesn't work in IE, Edge & Firefox.

Upvotes: 0

Zorken17
Zorken17

Reputation: 1896

Hiding the scrollbar and still keeping the functionality seems to be a hard thing to do on the body-element. But this might be a good enough solution for you:

CSS:

body{overflow:hidden;} 
body:hover {overflow:auto;}

Upvotes: 0

autoboxer
autoboxer

Reputation: 1397

If you wrap the contents you don't want to scroll in <div class='hidden-scrollbar'>, and as an example, have your scrollable content in something like <div class='inner'>, something like:

<div class='hidden-scrollbar'>
    <div class='inner'>
        Lorem ipsum dolor sit amet...
    </div>
</div>

you can apply the following styles to remove the vertical scrollbar:

body {
    padding:50px;   
}

.hidden-scrollbar {
    background-color:black;
    border:2px solid #666;
    color:white;  
    overflow:hidden;
    text-align:justify;    
}

.hidden-scrollbar .inner {
    height:200px;
    overflow:auto;
    margin:15px -300px 15px 15px;
    padding-right:300px;
}

You might need to rework the contents of your page a bit, and it is a touch on the kludgy side, but as far as I know, it's the only way to get what you're looking for. Here's a fiddle that shows it in action.

Upvotes: 0

Kay Marshal
Kay Marshal

Reputation: 21

Try this by a CSS solution

body{
      overflow : hidden
}

If same has to be done in jQuery

$("body").css("overflow", "hidden");

This should work like a charm.

Upvotes: -1

T&#252;mer Koloğlu
T&#252;mer Koloğlu

Reputation: 113

You can use the code below to hide vertical and horizontal scrolling. For detailed answer you can check this question. 

<style type="text/css">
    body {
        overflow:hidden;
    }
</style>

Upvotes: -1

Related Questions