I just want to hide the scrollbar, in a page that needs scrolling. I am using Ionic 2
My not working solution:
.scroll-content-bar{
overflow: hidden;
}
This solution hide the scroll-bar but makes the screen unscrollable.
Add a comment
|
4 Answers
First and foremost, changing natural behavior of the browser and expected user experience is a risky move.
However, if you still really really want to, I think your best bet is to fake it. In this case, setting width to 0 should be enough but I'm also changing background colors to be completely transparent.
div{
background: gray;
height: 200px;
overflow-y: scroll;
}
p{
border-bottom: 1px solid black;
}
div::-webkit-scrollbar {
border:none;
width:0;
background: rgba(0,0,0,0);
}
div::-webkit-scrollbar-track {
border:none;
width:0;
background: rgba(0,0,0,0);
}
div::-webkit-scrollbar-thumb {
border:none;
width:0;
background: rgba(0,0,0,0);
}<div>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
Comments
Just add below line to your css/scss file and it will work just fine.
::-webkit-scrollbar { display:none; }
Comments
Please add this to the .scss file.
.scroll-content {
overflow-y: auto;
}
To override in the whole app, add it to the app.scss file.
Comments
Just apply this css, it working very well for me:
@media only screen and (min-width: 1025px) {
.scroll-content:not(.show-scrollbar) {
margin-right: -17px;
overflow-y: scroll;
}
}
you may improve the media query to attach only the desktop browser.