Ion 2: Hide the scroll bar and save the scroll

Question

I just want to hide the scroll bar on a page that requires scrolling. I am using Ionic 2

My solution does not work :

.scroll-content-bar{
     overflow: hidden;
}

This solution hides the scroll bar , but makes the screen non-pickable.

Answer 1

First of all, changing the natural behavior of the browser and the expected user experience is a risky move.

, , , - . width 0 , , .

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>

Hide result

Answer 2

.scss.

.scroll-content {
    overflow-y: auto;
}

, app.scss.

Answer 3

css, :

@media only screen and (min-width: 1025px) {
    .scroll-content:not(.show-scrollbar) {
        margin-right: -17px;
        overflow-y: scroll;
    }
}

-, .

Answer 4

css/scss, .

::-webkit-scrollbar { display:none; }