Remove scroll bar while keeping scroll functionality

Question

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.

Body. Answer from Mike does work, but not in all browsers... — David Hakkert, Jun 05 '14 at 07:13

score 2 · Answer 1 · answered Jun 05 '14 at 06:56

2

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

answered Jun 05 '14 at 06:56

Mike

143
2
12

But how about the other browser like IE and FF? – Kheema Pandey Jun 05 '14 at 07:02
This works in Chrome. But indeed, how about in IE and other browsers? – David Hakkert Jun 05 '14 at 07:11
Yes.. This only works in Chrome. There hasn't been any other solutions for other browsers yet. So I think you should stick to JQuery. I've found an other thread related to this one. You should check it out. http://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox – Mike Jun 05 '14 at 07:48
Hmm. I have found something else. The parent div has a width of 150px and overflow: hidden;. The div inside the parent has a width that exceeds the width of the parent. Because of the overflow: hidden, you won't see the scrollingbar. Maybe this helps: http://jsfiddle.net/qqPcb/ – Mike Jun 05 '14 at 07:54

score 1 · Answer 2 · answered Jun 05 '14 at 06:58

1

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!

answered Jun 05 '14 at 06:58

Alex Wilson

2,421
11
13

score 1 · Answer 3 · answered Jun 05 '14 at 07:50

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

score 0 · Answer 4 · answered Jun 05 '14 at 07:00

0

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.

answered Jun 05 '14 at 07:00

user2598808

633
5
22
40

Kheema Pandey · Answer 5 · 2014-06-05T11:44:34.813

0

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*/
}

edited Jun 05 '14 at 11:44

answered Jun 05 '14 at 07:11

Kheema Pandey

9,977
4
25
26

I see. But now you are using overflow: hidden. That results i a page without scrollbar. But the site is also not able to scroll anymore. – David Hakkert Jun 05 '14 at 07:44
its very hard to resolve the problem unless we see any code.. Everyone can make a assumption only here. – Kheema Pandey Jun 05 '14 at 07:52
seems @oGeez have given the right solution. and I hope that solution you are looking for.. – Kheema Pandey Jun 05 '14 at 08:01

Remove scroll bar while keeping scroll functionality

5 Answers5