html - ionic 2 : Hide scroll-bar and keep scrolling

Question

我只想在需要滚动的页面中隐藏滚动条。我正在使用 Ionic 2

我的不工作解决方案:

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

此解决方案隐藏滚动条但使屏幕不可滚动。

Answer 1

首先，改变浏览器的自然行为和预期的用户体验是一个冒险的举动。

但是，如果您仍然真的想要，我认为您最好的选择是伪造它。在这种情况下，将 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>