Hide/remove scrollbar from <body> but allow scrolling
Question
As per the title, is there a way to hide/remove the scrollbar from body (not a div, but the entire body) and keep the 'scrollable property' enabled? I've been trying different solutions in these days but nothing really worked.
Thank you in advance!
6 answers
solution1
4 2017-03-05 20:10:22
-webkit- solution from Fabian Schultz worked great, I added: -ms-overflow-style:none; to hide scrollbar on IE. Scroll enabled, scrollbar hidden.
This is the complete CSS:
::-webkit-scrollbar {
display: none;
}
::-webkit-scrollbar-button {
display: none;
}
body {
-ms-overflow-style:none;
}
solution2
0 2016-10-10 12:59:03
In webkit browsers, you could use the scrollbar styling to "hide" it:
::-webkit-scrollbar {
display: none;
}
::-webkit-scrollbar-button {
display: none;
}
Unfortunately this doesn't work in IE, Edge & Firefox .
solution3
0 2016-10-10 13:25:04
If you wrap the contents you don't want to scroll in <div class='hidden-scrollbar'> , and as an example, have your scrollable content in something like <div class='inner'> , something like:
<div class='hidden-scrollbar'>
<div class='inner'>
Lorem ipsum dolor sit amet...
</div>
</div>
you can apply the following styles to remove the vertical scrollbar:
body {
padding:50px;
}
.hidden-scrollbar {
background-color:black;
border:2px solid #666;
color:white;
overflow:hidden;
text-align:justify;
}
.hidden-scrollbar .inner {
height:200px;
overflow:auto;
margin:15px -300px 15px 15px;
padding-right:300px;
}
You might need to rework the contents of your page a bit, and it is a touch on the kludgy side, but as far as I know, it's the only way to get what you're looking for. Here's a fiddle that shows it in action .
solution4
0 2016-10-10 13:40:54
Hiding the scrollbar and still keeping the functionality seems to be a hard thing to do on the body-element. But this might be a good enough solution for you:
CSS:
body{overflow:hidden;}
body:hover {overflow:auto;}
solution5
-2 2016-10-10 12:45:02
You can use the code below to hide vertical and horizontal scrolling. For detailed answer you can check this question .
<style type="text/css">
body {
overflow:hidden;
}
</style>
solution6
-2 2016-10-10 12:55:40
Try this by a CSS solution
body{
overflow : hidden
}
If same has to be done in jQuery
$("body").css("overflow", "hidden");
This should work like a charm.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.