CODEWITHSUNDEEP
htmlcssscrolloverflow
SpaceApe
SpaceApe

Reputation: 639

Remove scroll bar while keeping scroll functionality

I need to remove the scroll bar in my site.

But when I use overflow: hidden my page won't scroll anymore. Is there any other solution?

I couldn't find one with Google.

Upvotes: 0

Views: 805

Answers (5)

Kheema Pandey
Kheema Pandey

Reputation: 10285

If you need to remove the scrollbar you can use these property. please check and share if works for you. check the DEMO.

#container{
    width:100%;
    height:100%;
    overflow:auto;
    position:fixed;
    padding-right:20px; /*will give a Illusion of removing the scrollbar because browser scrollbar width is 20px*/
}

Upvotes: 0

George
George

Reputation: 36794

I don't think there is a cross-browser solution to hide the scrollbar while preserving scroll functionality.

Although, you can easily simulate this behaviour, with help from a full-body wrapper that takes on the dimensions of the body but is padded on the right to hide the scrollbar.

Yes, you must give the overflow:hidden property to body, but your wrapper becomes your new scrollable element. Something like the following should work for you:

HTML

<div id="wrapper">Lots of text.....</div>

CSS

html{
    height:100%;
}
body{
    margin:0;
    overflow:hidden;
    height:100%;
}
#wrapper{
    width:100%;
    height:100%;
    overflow:auto;
    padding-right:20px;
}

JSFiddle

Upvotes: 1

user2598808
user2598808

Reputation: 643

Try :

Overflow : auto

if scroll is required, it will display automatically.

You can also try 

Overflow-X : auto
Overflow-Y : auto

Let me know if this fixes your problem.

Upvotes: 0

Alex Wilson
Alex Wilson

Reputation: 2419

elementary than you can hide an element on the page is to assign display: none; or visability: hidden;

Even invisible elements take up space on the page. Use the "display" property to create invisible elements that do not take up space!

Upvotes: 1

Mike
Mike

Reputation: 143

I have tried to use overflow:hidden; but it does exactly what you said.. So you should try to add this to your css. 

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

Upvotes: 2

Related Questions