How to hide ScrollBar but not disable it

To disable the toolbar, you use CSS without a secret, as you may already have trying with overflow-x: hidden; . JQuery makes only the page be scrollable. To do this, you can use the mousewheel plugin to emulate scrolling (in this case, only with the middle button). In order to use the directional buttons and pgdn, pgup, home and end, I would need to use keydown events and / or keypress, 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: link

MouseWheel plugin repository in GitHub: jquery-mousewheel

There is a very simple method, I discovered in the same arm, simply using CSS, without Js. Put in your stylesheet:

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

Ready: D

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

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

Obviously, for the content to be scrollable it must be larger than the element in which it is contained (hence the height: 100px ). Of course, the same effect is possible horizontally, using overflow-x and restricting according to the width dimensions of the elements involved. Here's 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>