删除微小的滚动条 - 离子3

时间:2017-07-04 05:02:37

标签: css ionic-framework sass ionic2 ionic3

你可以看到有一个小滚动条如下图所示。你能告诉我如何删除它吗?这是Accept个应用。我尝试了很多方法。但是没有运气。

请查看该设备有多糟糕:(

enter image description here

这在浏览器上:

enter image description here

.sass

Ionic 3

html的

 .height-70 {
        height: 70px;
        overflow: hidden;
    }

Chrome css(运行时):<ion-content padding> <ion-grid> <ion-row> <ion-col class="height-70" col-12> <ion-content> <button ion-button icon-left full (click)="loginWithLinkedin()" class="background-color-linkedin"><ion-icon name="logo-linkedin" class="margin-top-minus-4"></ion-icon><span>Continue with Linkedin</span></button> </ion-content> </ion-col> </ion-row> </ion-grid> </ion-content> 以下是问题。但我该如何删除它?因为我也需要填充。任何解决方法?

enter image description here

5 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:2)

如果您在ion-content内使用ion-col,则会在scroll-content中添加一些属性。 ion-content替换为div ,然后手动将所需的所有css属性添加到div

答案 2 :(得分:1)

在/ src / app /

下尝试使用此文件app.scss
[scrollbar-y-auto] .scroll-content {
  overflow-y: false !important;
}

和 你的代码:

<ion-content scrollbar-y-auto>

未经测试检查并告诉我

答案 3 :(得分:0)

试试以下内容,

<ion-content overflow-scroll="false">

1.bounce,

<ion-content no-bounce></ion-content>

2

.content > .scroll-content::before {
    bottom: 0;
}

.content > .scroll-content::after {
    top: 0;
}

3

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

4

<ion-content>
   <div ion-fixed>
   </div>
</ion-content>

答案 4 :(得分:0)

我所经历的有时您会在浏览器中看到滚动条而在设备上看不到滚动条。我建议您在设备中验证相同内容,或者按Ctrl+Shift+M在开发工具中尝试使用Chrome设备模拟器。

相关问题