Hide scroll bar, but while still being able to scroll
HtmlCssGoogle ChromeInternet ExplorerFirefoxHtml Problem Overview
I want to be able to scroll through the whole page, but without the scrollbar being shown.
In Google Chrome it's:
::-webkit-scrollbar {
display: none;
}
But Mozilla Firefox and Internet Explorer don't seem to work like that.
I also tried this in CSS:
overflow: hidden;
That does hide the scrollbar, but I can't scroll any more.
Is there a way I can remove the scrollbar while still being able to scroll the whole page?
With just CSS or HTML, please.
Html Solutions
Solution 1 - Html
Just a test which is working fine.
#parent{
width: 100%;
height: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}
JavaScript:
Since the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth
, the exact scrollbar width will show up.
Or
Using Position: absolute
,
#parent{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
}
Information:
Based on this answer, I created a simple scroll plugin.
Solution 2 - Html
This works for me with simple CSS properties:
.container {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
For older versions of Firefox, use: overflow: -moz-scrollbars-none;
Solution 3 - Html
It is easy in WebKit, with optional styling:
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
Solution 4 - Html
UPDATE:
Firefox now supports hiding scrollbars with CSS, so all major browsers are now covered (Chrome, Firefox, Internet Explorer, Safari, etc.).
Simply apply the following CSS to the element you want to remove scrollbars from:
.container {
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
width: 0;
height: 0;
}
This is the least hacky cross browser solution that I'm currently aware of. Check out the demo.
ORIGINAL ANSWER:
Here's another way that hasn't been mentioned yet. It's really simple and only involves two divs and CSS. No JavaScript or proprietary CSS is needed, and it works in all browsers. It doesn't require explicitly setting the width of the container either, thus making it fluid.
This method uses a negative margin to move the scrollbar out of the parent and then the same amount of padding to push the content back to its original position. The technique works for vertical, horizontal and two way scrolling.
Demos:
Example code for the vertical version:
HTML:
<div class="parent">
<div class="child">
Your content.
</div>
</div>
CSS:
.parent {
width: 400px;
height: 200px;
border: 1px solid #AAA;
overflow: hidden;
}
.child {
height: 100%;
margin-right: -50px; /* Maximum width of scrollbar */
padding-right: 50px; /* Maximum width of scrollbar */
overflow-y: scroll;
}
Solution 5 - Html
Use:
<div style='overflow:hidden; width:500px;'>
<div style='overflow:scroll; width:508px'>
My scroll-able area
</div>
</div>
This is a trick to somewhat overlap the scrollbar with an overlapping div which doesn't have any scroll bars:
::-webkit-scrollbar {
display: none;
}
This is only for WebKit browsers... Or you could use browser-specific CSS content (if there is any in future). Every browser could have a different and specific property for their respective bars.
For Microsoft Edge use: -ms-overflow-style: -ms-autohiding-scrollbar;
or -ms-overflow-style: none;
as per MSDN.
There is no equivalent for Firefox. Although there is a jQuery plugin to achieve this, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
Solution 6 - Html
In addition, Scrolling without scroll bar for all browsers.
> CSS
.keep-scrolling {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow-y: scroll; /* Add the ability to scroll y axis*/
}
/* Hide scrollbar for Chrome, Safari and Opera */
.keep-scrolling::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.keep-scrolling {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
SCSS
.keep-scrolling {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow-y: scroll; /* Add the ability to scroll y axis*/
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
/* Hide scrollbar for Chrome, Safari and Opera */
&::-webkit-scrollbar {
display: none;
}
}
> HTML
<div class="keep-scrolling">
</div>
Solution 7 - Html
This answer doesn't include the code, so here is the solution from page:
According to the page this approach doesn't need to know the width of the scrollbar ahead of time in order to work and the solution works for all browsers too, and can be seen http://jsfiddle.net/2Kwsc/">here</a>;.
The good thing is that you are not forced to use padding or width differences to hide the scrollbar.
This is also zoom safe. Padding/width solutions show the scrollbar when zoomed to minimum.
Firefox fix: http://jsbin.com/mugiqoveko/1/edit?output
.element,
.outer-container {
width: 200px;
height: 200px;
}
.outer-container {
border: 5px solid purple;
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
padding-right: 150px;
}
.inner-container::-webkit-scrollbar {
display: none;
}
<div class="outer-container">
<div class="inner-container">
<div class="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut
dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique
aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie
vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies.
</div>
</div>
</div>
Solution 8 - Html
Just use following three lines and your problem will be solved:
#liaddshapes::-webkit-scrollbar {
width: 0 !important;
}
Where liaddshapes is the name of the div where scroll is coming.
Solution 9 - Html
Use this to hide the scrollbar but keep functionality:
.example::-webkit-scrollbar {
display: none;
}
Hide scrollbar for IE, Edge and Firefox
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
Solution 10 - Html
This works for me cross-browser. However, this doesn't hide native scrollbars on mobile browsers.
In SCSS
.hide-native-scrollbar {
scrollbar-width: none; /* Firefox 64 */
-ms-overflow-style: none; /* Internet Explorer 11 */
&::-webkit-scrollbar { /** WebKit */
display: none;
}
}
In CSS
.hide-native-scrollbar {
scrollbar-width: none; /* Firefox 64 */
-ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
display: none;
}
Solution 11 - Html
Just write this code:
::-webkit-scrollbar {
width: 0px;
}
or
::-webkit-scrollbar {
display: none;
}
Solution 12 - Html
The following was working for me on Microsoft, Chrome and Mozilla for a specific div element:
div.rightsidebar {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar {
width: 0 !important;
}
Solution 13 - Html
scrollbar-width: none;
works for me
Solution 14 - Html
.className::-webkit-scrollbar{
display: none;
}
> Everything you've written is correct except "overflow". > webkit for Chrome and other browsers
overflow-y: scroll;
> or
overflow-y: auto;
> For Firefox and Edge
scrollbar-width: none;
> or
scrollbar-width: thin;
Solution 15 - Html
HTML:
<div class="parent">
<div class="child">
</div>
</div>
CSS:
.parent{
position: relative;
width: 300px;
height: 150px;
border: 1px solid black;
overflow: hidden;
}
.child {
height: 150px;
width: 318px;
overflow-y: scroll;
}
Apply CSS accordingly.
Check it here (tested in Internet Explorer and Firefox).
Solution 16 - Html
As of December 11th 2018 (Firefox 64 and above), the answer to this question is very simple indeed as Firefox 64+ now implements the CSS Scrollbar Styling spec.
Just use the following CSS:
scrollbar-width: none;
Firefox 64 release note link here.
Solution 17 - Html
To hide scroll bars for elements with overflowing content use.
.div{
scrollbar-width: none; /* The most elegant way for Firefox */
}
Solution 18 - Html
Use:
CSS
#subparent {
overflow: hidden;
width: 500px;
border: 1px rgba(0, 0, 0, 1.00) solid;
}
#parent {
width: 515px;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
opacity: 10%;
}
#child {
width: 511px;
background-color: rgba(123, 8, 10, 0.42);
}
HTML
<body>
<div id="subparent">
<div id="parent">
<div id="child">
<!- Code here for scroll ->
</div>
</div>
</div>
</body>
Solution 19 - Html
On modern browsers you can use wheel event
:
// Content is the element you want to apply the wheel scroll effect to
content.addEventListener('wheel', function(e) {
const step = 100; // How many pixels to scroll
if (e.deltaY > 0) // Scroll down
content.scrollTop += step;
else // Scroll up
content.scrollTop -= step;
});
Solution 20 - Html
Use
function reloadScrollBars() {
document.documentElement.style.overflow = 'auto'; // Firefox, Chrome
document.body.scroll = "yes"; // Internet Explorer only
}
function unloadScrollBars() {
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // Internet Explorer only
}
Call these functions for any point you want to load or unload or reload the scrollbars. It is still scrollable in Chrome as I tested it in Chrome, but I am not sure of the other browsers.
Solution 21 - Html
This works for me:
scroll-content {
overflow-x: hidden;
overflow-y: scroll;
}
scroll-content::-webkit-scrollbar {
width: 0;
}
Solution 22 - Html
This is how I do it for horizontal scroll; only CSS and works well with frameworks like Bootstrap / col-*. It only needs two extra div
s and the parent with a width
or max-width
set:
You can select the text to make it scroll or scroll it with fingers if you have a touchscreen.
.overflow-x-scroll-no-scrollbar {
overflow: hidden;
}
.overflow-x-scroll-no-scrollbar div {
overflow-x: hidden;
margin-bottom: -17px;
overflow-y: hidden;
width: 100%;
}
.overflow-x-scroll-no-scrollbar div * {
overflow-x: auto;
width: 100%;
padding-bottom: 17px;
white-space: nowrap;
cursor: pointer
}
/* The following classes are only here to make the example looks nicer */
.row {
width: 100%
}
.col-xs-4 {
width: 33%;
float: left
}
.col-xs-3 {
width:25%;
float:left
}
.bg-gray {
background-color: #DDDDDD
}
.bg-orange {
background-color:#FF9966
}
.bg-blue {
background-color: #6699FF
}
.bg-orange-light{
background-color: #FFAA88
}
.bg-blue-light{
background-color: #88AAFF
}
<html><body>
<div class="row">
<div class="col-xs-4 bg-orange">Column 1</div>
<div class="col-xs-3 bg-gray">Column 2</div>
<div class="col-xs-4 bg-blue">Column 3</div>
</div>
<div class="row">
<div class="col-xs-4 bg-orange-light">Content 1</div>
<div class="col-xs-3 overflow-x-scroll-no-scrollbar">
<div>
<div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
</div>
</div>
<div class="col-xs-4 bg-blue-light">Content 3</div>
</div>
</body></html>
Short version for lazy people:
.overflow-x-scroll-no-scrollbar {
overflow: hidden;
}
.overflow-x-scroll-no-scrollbar div {
overflow-x: hidden;
margin-bottom: -17px;
overflow-y: hidden;
width: 100%;
}
.overflow-x-scroll-no-scrollbar div * {
overflow-x: auto;
width: 100%;
padding-bottom: 17px;
white-space: nowrap;
cursor:pointer
}
/* The following classes are only here to make the example looks nicer */
.parent-style {
width: 100px;
background-color: #FF9966
}
<div class="parent-style overflow-x-scroll-no-scrollbar">
<div>
<div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
</div>
</div>
Solution 23 - Html
My problem: I don't want any style in my HTML content. I want my body directly scrollable without any scrollbar, and only a vertical scroll, working with CSS grids for any screen size.
The box-sizing value impact padding or margin solutions, they works with box-sizing:content-box.
I still need the "-moz-scrollbars-none" directive, and like gdoron and Mr_Green, I had to hide the scrollbar. I tried -moz-transform
and -moz-padding-start
, to impact only Firefox, but there was responsive side effects that needed too much work.
This solution works for HTML body content with "display: grid" style, and it is responsive.
/* Hide HTML and body scroll bar in CSS grid context */
html, body {
position: static; /* Or relative or fixed ... */
box-sizing: content-box; /* Important for hidding scrollbar */
display: grid; /* For CSS grid */
/* Full screen */
width: 100vw;
min-width: 100vw;
max-width: 100vw;
height: 100vh;
min-height: 100vh;
max-height: 100vh;
margin: 0;
padding: 0;
}
html {
-ms-overflow-style: none; /* Internet Explorer 10+ */
overflow: -moz-scrollbars-none; /* Should hide the scroll bar */
}
/* No scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none; /* Might be enough */
background: transparent;
visibility: hidden;
width: 0px;
}
/* Firefox only workaround */
@-moz-document url-prefix() {
/* Make HTML with overflow hidden */
html {
overflow: hidden;
}
/* Make body max height auto */
/* Set right scroll bar out the screen */
body {
/* Enable scrolling content */
max-height: auto;
/* 100vw +15px: trick to set the scroll bar out the screen */
width: calc(100vw + 15px);
min-width: calc(100vw + 15px);
max-width: calc(100vw + 15px);
/* Set back the content inside the screen */
padding-right: 15px;
}
}
body {
/* Allow vertical scroll */
overflow-y: scroll;
}
Solution 24 - Html
The following SASS styling should make your scrollbar transparent on most browsers (Firefox is not supported):
.hide-scrollbar {
scrollbar-width: thin;
scrollbar-color: transparent transparent;
&::-webkit-scrollbar {
width: 1px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: transparent;
}
}
Solution 25 - Html
.your-overflow-scroll-class::-webkit-scrollbar {
...
width: 0.5rem; //only hide the vertical scrollbar
height: 0px; //only hide the horizontal scrollbar
}
Solution 26 - Html
Adding padding to an inner div
, as in the currently accepted answer, won't work if for some reason you want to use box-model: border-box
.
What does work in both cases is increasing the width of the inner div
to 100% plus the scrollbar's width (assuming overflow: hidden
on the outer div).
For example, in CSS:
.container2 {
width: calc(100% + 19px);
}
In JavaScript, cross-browser:
var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';
Solution 27 - Html
This will be at the body:
<div id="maincontainer" >
<div id="child">this is the 1st step</div>
<div id="child">this is the 2nd step</div>
<div id="child">this is the 3rd step</div>
And this is the CSS:
#maincontainer
{
background: grey;
width: 101%;
height: 101%;
overflow: auto;
position: fixed;
}
#child
{
background: white;
height:500px;
}
Solution 28 - Html
This is a divitis-esque solution which nontheless should work for all browsers...
The markup is as follows and needs to be inside something with relative positioning (and its width should be set, for example 400 pixels):
<div class="hide-scrollbar">
<div class="scrollbar">
<div class="scrollbar-inner">
</div>
</div>
</div>
The CSS:
.hide-scrollbar {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.scrollbar {
overflow-y: scroll;
position: absolute;
top: 0;
left: 0;
right: -50px;
bottom: 0;
}
.scrollbar-inner {
width: 400px;
}
Solution 29 - Html
I happen to try the above solutions in my project and for some reason I was not able to hide the scroll bar due to div positioning. Hence, I decided to hide the scroll bar by introducing a div that covers it superficially. Example below is for a horizontal scroll bar:
<div id="container">
<div id="content">
My content that could overflow horizontally
</div>
<div id="scroll-cover">
</div>
</div>
Corresponding CSS is as follows:
#container{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#content{
width: 100%;
height: 100%;
overflow-x: scroll;
}
#scroll-cover{
width: 100%;
height: 20px;
position: absolute;
bottom: 0;
background-color: #fff; /*change this to match color of page*/
}
Solution 30 - Html
I just wanted to share a combined snippet for hiding the scrollbar that I use when developing. It is a collection of several snippets found on the Internet that works for me:
.container {
overflow-x: scroll; /* For horiz. scroll, otherwise overflow-y: scroll; */
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
scrollbar-width: none;
}
.container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
Solution 31 - Html
You can use the code below to hide the scroll bar, but while still being able to scroll:
.element::-webkit-scrollbar {
width: 0 !important
}
Solution 32 - Html
This worked for me
div {
-ms-overflow-style: none; /* Edge, Internet Explorer */
scrollbar-width: none; /* Firefox */
overflow-y: scroll;
}
// hides scrollbars while allowing to scroll
div::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
Solution 33 - Html
Another simple working fiddle:
#maincontainer {
background: orange;
width: 200px;
height: 200px;
overflow: hidden;
}
#childcontainer {
background: yellow;
position: relative;
width: 200px;
height: 200px;
top: 20px;
left: 20px;
overflow: auto;
}
Overflow hidden on the parent container, and overflow auto on the child container. Simple.
Solution 34 - Html
Another sort of hacky approach is to do overflow-y: hidden
and then manually scroll the element with something like this:
function detectMouseWheelDirection(e) {
var delta = null, direction = false;
if (!e) { // If the event is not provided, we get it from the window object
e = window.event;
}
if (e.wheelDelta) { // Will work in most cases
delta = e.wheelDelta / 60;
} else if (e.detail) { // Fallback for Firefox
delta = -e.detail / 2;
}
if (delta !== null) {
direction = delta > 0 ? -200 : 200;
}
return direction;
}
if (element.addEventListener) {
element.addEventListener('DOMMouseScroll', function(e) {
element.scrollBy({
top: detectMouseWheelDirection(e),
left: 0,
behavior: 'smooth'
});
});
}
There's a great article about how to detect and deal with onmousewheel
events in deepmikoto's blog.
This might work for you, but it is definitively not an elegant solution.
Solution 35 - Html
Hide both horizontal and vertical scroll bars.
HTML
<div id="container1">
<div id="container2">
<pre>
Select from left and drag to right to scroll this very long sentence. This should not show scroll bar at bottom or on the side. Keep scrolling .......... ............ .......... ........... This Fiddle demonstrates that scrollbar can be hidden. ..... ..... ..... .....
</pre>
</div>
<div>
CSS
* {
margin: 0;
}
#container1 {
height: 50px;
width: 100%;
overflow: hidden;
position: relative;
}
#container2 {
position: absolute;
top: 0px;
bottom: -15px;
left: 0px;
right: -15px;
overflow: auto;
}
Solution 36 - Html
This tricky solution works even on old IE web browser
It's a workaround to the [ vertical scrollbar ]
<html>
<head>
<style>
html,
body {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: hidden;
height: 100%;
margin: 0;
}
</style>
</head>
<body id="body" style="overflow:auto;height:100%" onload="document.getElementById('body').style.width=document.body.offsetWidth+20+'px'">
<!--your stuff here-->
</body>
</html>
Just try it: jsfiddle
Solution 37 - Html
I know this is a really old question, but here is a cool cross-browser solution utilizing only HTML and CSS.
HTML:
<div class="barrel">
<div class="clipper">
<p class="clippercontent">Lorem</p>
</div>
<div id='navcontainer'>
<p class="navcontent" >I want to be able to scroll through the whole page, but without the scrollbar being shown. Is there a way I can remove the scrollbar while still being able to scroll the whole page? With just CSS or HTML, please.
</p>
</div>
</div>
Principle: The #navcontainer will house our .navcontent, and will have scrollbars. The .barrel will hide the scrollbar of the #navcontainer.
CSS:
.barrel{
border: 0.8px solid #110011;
position: relative;
overflow: hidden;
}
.barrel #navcontainer{
overflow: scroll; overflow-y: hidden;
position: absolute;/* absolute positioned contents will not affect their parents */
top: 0; left: 0; right: 0;
white-space: nowrap;
}
/* style .clipper and .clippercontent, as a structural-image of #navcontainer and .navcontent respectively This will help .barrel have the same height as the #navcontainer */
.barrel .clipper{
overflow: hidden;
width: 0px;
white-space: nowrap;
}
.navcontent, .clippercontent{
padding: 3px 1px;
}
Solution 38 - Html
Just set the width of the child's width to 100%, padding to 15 pixels, overflow-x
to scroll and overflow:hidden
for the parent and whatever width you want.
It works perfectly on all major browsers, including Internet Explorer and Edge with the exception of Internet Explorer 8 and lower.
Solution 39 - Html
I had this problem, and it is super simple to fix.
Get two containers. The inner will be your scrollable container and the outer will obviously house the inner:
#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }
It is super simple and should work with any browser.