Ionic 2：隐藏滚动条并继续滚动答案

【问题标题】：Ionic 2: Hide scroll-bar and keep scrollingIonic 2：隐藏滚动条并继续滚动
【发布时间】：2018-02-06 10:55:04
【问题描述】：

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

我的不起作用解决方案：

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

此解决方案隐藏滚动条但使屏幕无法滚动。

【问题讨论】：

标签： html css ionic2 scrollbar ionic3

【解决方案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>

【讨论】：

【解决方案2】：

只需将下面的行添加到您的 css/scss 文件中，它就可以正常工作了。

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

【讨论】：

【解决方案3】：

请将此添加到 .scss 文件中。

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

要在整个应用中覆盖，请将其添加到 app.scss 文件中。

【讨论】：

【解决方案4】：

只需应用这个 css，它对我来说效果很好：

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

您可以改进媒体查询以仅附加桌面浏览器。

【讨论】：