CODEWITHSUNDEEP
htmlcssscrollbar
Farmer
Farmer

Reputation: 10983

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.

Upvotes: 27

Views: 153302

Answers (6)

Nabeel Khan
Nabeel Khan

Reputation: 5

In HTML

<div style="overflow: hidden;">

in CSS

overflow: hidden;

you can also end scrolling for x or y separately

overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */

Upvotes: 0

Brumus14
Brumus14

Reputation: 83

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

Upvotes: 4

Ananth Vivekanand
Ananth Vivekanand

Reputation: 169

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:

    function keydownHandler(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/

Upvotes: 3

hndcrftd
hndcrftd

Reputation: 3210

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

Upvotes: 7

Greg McNulty
Greg McNulty

Reputation: 1466

put this code in your html header: 

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

Upvotes: 4

meder omuraliev
meder omuraliev

Reputation: 186552

If you really need it...

html { overflow-y: hidden; }

Upvotes: 69

Related Questions