Hide/remove scrollbar from but allow scrolling

Question

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!

check it here http://stackoverflow.com/questions/2469529/how-to-disable-scrolling-the-document-body — lazyCoder, Oct 10 '16 at 12:47
https://blogs.msdn.microsoft.com/kurlak/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari/ — roberrrt-s, Oct 10 '16 at 13:06
because yeah, why keep conventions that the whole world knows and relies on if you could just break them and confuse everyone... /rant — Peter B, Oct 10 '16 at 13:11
@Roberrrt I tried that solution in the past days but it does not work (at least on body). — GiS91, Oct 10 '16 at 13:51

score 5 · Answer 1 · edited May 23 '17 at 12:02

5

-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;
}

edited May 23 '17 at 12:02

Community

1
1

answered Mar 05 '17 at 20:10

wuzla

71
1
5

Fabian Schultz · Answer 2 · 2016-10-10T14:00:54.097

0

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.

edited Oct 10 '16 at 14:00

answered Oct 10 '16 at 12:59

Fabian Schultz

18,138
5
49
56

Your code runs smoothly in webkit browsers. Thank you! Two questions: 1) Do you know some hacks for Firefox and IE/Edge? 2) How can I achieve that dynamically with jQuery (for example: hide/remove the scrollbar and still being able to scroll after clicking a button)? – GiS91 Oct 10 '16 at 13:46
1) Take a look at https://github.com/noraesae/perfect-scrollbar 2) I updated my example to have a toggle button for that CSS rule, but it doesn't work instantly. You need to wait a second after disabling the scrollbar for the change to take effect. – Fabian Schultz Oct 10 '16 at 14:00
'Perfect scrollbar' does not seem to work. What I've done is: 1) Assigning an id="container" along with position:relative and height:100%; to body tag; 2) Initialising the plugin as indicated: var container = document.getElementById('container'); Ps.initialize(container); 3) Calling 'destroy' to destroy the scrollbar: Ps.destroy(container); Unfortunately, nothing happens. Parameters such as ' wheelSpeed' works well instead. – GiS91 Oct 11 '16 at 13:49

score 0 · Answer 3 · answered Oct 10 '16 at 13:25

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.

score 0 · Answer 4 · answered Oct 10 '16 at 13:40

0

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;}

answered Oct 10 '16 at 13:40

Zorken17

1,896
1
10
16

score -2 · Answer 5 · edited May 23 '17 at 11:46

-2

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>

edited May 23 '17 at 11:46

Community

1
1

answered Oct 10 '16 at 12:45

Tümer Koloğlu

95
8

overflow:hidden removes the scrollbar as well as the possibility to scroll. What I want is to hide/remove the scrollbar but still being able to scroll. – GiS91 Oct 10 '16 at 12:53
in the link I sent people discuss that situation aswell. Read through the other answers. I didn't test them out but it seems like you have to arrange it for each browser. – Tümer Koloğlu Oct 10 '16 at 12:59

score -2 · Answer 6 · answered Oct 10 '16 at 12:55

-2

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.

answered Oct 10 '16 at 12:55

Kay Marshal

11
3

Thank you, Kay. Yes, your solution removes the scrollbar but you're not able to scroll anymore. What I'm trying to get is removing the scrollbar but still being able to scroll. – GiS91 Oct 10 '16 at 12:59
This is not what OP are asking for. overflow: hidden; doesn't just hide the scrollbar, it also prevent the site from scrolling. – maverick Oct 10 '16 at 13:28

Hide/remove scrollbar from but allow scrolling

6 Answers6