How to hide the Scrollbar, but without deactivating it

Question

I wonder if you can disable the Scrollbar without deactivating it, IE, hide the Scrollbar but leave it working normally, as if he had the show.

Answer 1

There is a very simple method, discovered in the same arm, simply using CSS, without Js. Put it on your style sheet:

/* Largura da barra de rolagem */
::-webkit-scrollbar {
    width: 0px;
}

Ready :D

Answer 2

To disable the bar you use CSS without secret, as you may have tried with overflow-x: hidden;. jQuery only makes the page be scrollable. To do so, you can use the plugin mousewheel for emulate the scrolling (in this case only with the Middle button). In order to use the directional buttons and pgdn, pgup, home and end, you would need to use the keydown and/or keypress events, it would be a somewhat more complex code.

<div id="example" style="width:300px;height:200px;overflow:hidden">
    Seu conteúdo aqui
</div>

<script>
    $("#example").bind("mousewheel",function(ev, delta) {
        var scrollTop = $(this).scrollTop();
        $(this).scrollTop(scrollTop-Math.round(delta));
    });
</script>

Reference: https://stackoverflow.com/questions/1326570/how-can-i-disable-a-browser-or-element-scrollbar-but-still-allow-scrolling-with

Mousewheel plugin repository on Github: jquery-mousewheel

Answer 3

With pure CSS, you can literally hide the scrollbar of an element by placing it within another element of smaller dimensions. Without overheads...

In the example below, the <div> #fixed contains the <div> #rollable, but has a smaller 17px width and has the property overflow defined as hidden, ensuring that #fixed will not "stretch" to fit the scrollbar of the child element. Meanwhile, the overflow-y: scroll in #rollable ensures that there will be scroll bar on the child element, so that its width is always predictable regardless of the vertical size of its content.

Obviously, for the content to be rollable it must be greater than the element in which it is contained (hence the height: 100px). And of course, the same effect is possible horizontally, with use overflow-x and restricting according to the width dimensions of the elements involved. Follow the example:

#fixo {
  width: 100px;
  overflow: hidden;
  background-color: yellow;
}
#rolavel {
  height: 100px;
  width: 117px;
  overflow-y: scroll;
  background-color: green;
}

<p>Role o div verde abaixo utilizando o scroll do mouse</p>
<div id="fixo">
  <div id="rolavel">
    <p>linha</p>
    <p>linha</p>
    <p>linha</p>
    <p>linha</p>
    <p>linha</p>
    <p>linha</p>
    <p>linha</p>
    <p>linha</p>
    <p>linha</p>
    <p>linha</p>
  </div>
</div>

Answer 4

An alternative using CSS only:

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

If you only want to use in a specific div/class:

.scroll-hidden::-webkit-scrollbar {
    display: none;
}