I have this CSS:
.div {
background-color: red;
position: relative;
height: 414px;
overflow: auto;
width: 902px;
margin: 0px auto;
}
I tried with overflow-y: hidden;, scrollbar disappear but scroll isn't working. Hope you understand what I want...
Also, should I use auto or scroll? With auto I see horizontal bar too.
Here is JSFiddle: http://jsfiddle.net/sp95S/
Thanks!
Create an inner div: http://jsfiddle.net/sp95S/1/
.div {
background-color: red;
position: relative;
height: 214px;
overflow: hidden;
width: 452px;
margin: 0px auto;
}
#inner{
width: 100%;
overflow: auto;
height: 100%;
padding-right: 15px;
}
If you want to hide the scrollbar, but keep the functionality, you can use:
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
It seems like you want to have the page still scroll without the scrollbar showing.
This has been answered here a couple of times already:
Basically you can use javascript (or jquery, though you don't necessarily need it). On webkit browsers, there is a function to hide the scrollbars:
::-webkit-scrollbar {
display: none;
}
but it won't work for firefox or internet explorer or opera.
If you want to hide the scroll bar, but maintain scroll you can look into a plugin called slimscroll. The scroll bar is there but it can be configure to be rather un-noticable.
