Deactivate Or Remove The Scrollbar On Html

I want to de-activate or remove the vertical scrollbar in an HTML page. How to do that ? Thanks.

Solution 1:

If you really need it...

html { overflow-y: hidden; }

Solution 2:

What I would try in this case is put this in the stylesheet

html, body{overflow:hidden;}

this way one disables the scrollbar, and as a cumulative effect they disable scrolling with the keyboard

Solution 3:

put this code in your html header:

<styletype="text/css">html {
        overflow: auto;
}
</style>

Solution 4:

This makes it so if before there was a scrollbar then it makes it so the scrollbar has a display of none so you can't see it anymore. You can replace html to body or a class or ID. Hope it works for you :)

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

Solution 5:

Meder Omuraliev suggested to use an event handler and set scrollTo(0,0). This is an example for Wassim-azirar. Bringing it all together, I assume this is the final solution.

We have 3 problems: the scrollbar, scrolling with mouse, and keyboard. This hides the scrollbar:

html, body{overflow:hidden;}

Unfortunally, you can still scroll with the keyboard: To prevent this, we can:

functionkeydownHandler(e) {
var evt = e ? e:event;
  var keyCode = evt.keyCode;

  if (keyCode==38 || keyCode==39 || keyCode==40 || keyCode==37){ //arrow keys
e.preventDefault()
scrollTo(0,0);
}
}

document.onkeydown=keydownHandler;

The scrolling with the mouse just naturally doesn't work after this code, so we have prevented the scrolling.

For example: https://jsfiddle.net/aL7pes70/1/