Question

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

我的无效解决方案：

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

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

Answer 1

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

然而，如果你真的真的想要，我认为最好的办法是假装它。在这种情况下，将import 'intl'; import 'intl/locale-data/jsonp/en';设置为0应该足够了，但我也将背景颜色更改为完全透明。

＆＃13;

width

＆＃13;

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);
}

＆＃13;

Answer 2

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

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

Answer 3

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

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

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

Answer 4

只需应用此CSS，它对我来说非常好：

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

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

离子2：隐藏滚动条并继续滚动

4 个答案: