Ionic 2: Hide scroll-bar and keep scrolling

Question

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.

Answer 1

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>