在 Windows 上访问时，ionic 3 烦人的始终可见的滚动条

Question

所以，我使用 ionic 3 和 angular 建立了一个网站。 我注意到的一件特别烦人的事情是，当从 Windows 机器访问网站时，所有浏览器上都会出现一个始终可见的滚动条。

这在 mac 上没问题。 我个人的理解是这应该取决于浏览器而不是操作系统。 但遗憾的是，不同操作系统上的相同浏览器显示出不同的行为。

最终，问题是当内容超出我的视野范围时，我如何获得与 mac 相同的行为。 小部件的代码如下所示：

 <ion-card class="dashboard-widget-layout dashboard-widget-1-2">
               <ion-card-header class="dashboard-widget-card-header"><ion-label class="dashboard-widget-header">Smart Alerts</ion-label></ion-card-header>
                <ion-card-content style="height: 320px" *ngIf="expanded == false">
                          <ion-scroll style="width:auto" scrollY="true"  class="dashboard-widget-1-2" no-padding>
                              <ion-grid  *ngFor="let opty of optys" style="border-top:1px solid #AFAFAF;margin-right:20px" text-wrap no-padding>
                                  <ion-row text-wrap>
                                  <ion-col (click)="editOpty(opty)" no-padding>
                                          <ion-label class="widget-para-title" style="cursor:pointer">{{opty.name}}</ion-label>
                                           <ion-label class="widget-para-text" style="cursor:pointer">{{opty.account}}</ion-label>
                                  </ion-col>
                                  </ion-row>
                              <ion-row text-wrap>

                              <ion-col>
                                   <ion-label *ngIf="opty.recommendedAction.length > 0" style="margin-top:0px;">{{opty.recommendedAction[0].title}}</ion-label>
                             </ion-col></ion-row>
                              </ion-grid>
                          </ion-scroll>
                </ion-card-content> 

                <ion-row><ion-col></ion-col>
                          <ion-col col-auto text-right no-padding>
                                  <img style="color:white;margin-right:10px" src="{{arrowType}}" (click)="expandWidget()" />
                          </ion-col>
                 </ion-row>
    </ion-card>

mac（所有浏览器）上的视图如下所示： https : //www.dropbox.com/s/v5eseru0ie304vu/Screenshot%202017-09-28%2017.28.37.png?dl=0

该视图在 Windows（所有浏览器）上如下所示： https://www.dropbox.com/s/rbd9lkyeqawow24/SmartAlertHomePageOOWDemoSnap.PNG?dl=0

Answer 1

我在这里！ 解决你的问题！！

我不会忘记你的兄弟...

转到app.scss并添加

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

这将解决您的大部分问题，但您可能仍然对 ionic-lab 的 ios 模拟器存在一些问题。

如果是这样，请转到每个 html 页面并将 no-bounce 和 overflow-scroll="false" 添加到 ion-content。

代码应该是这样的

<ion-content no-bounce overflow-scroll="false">
</ion-content>

最后，对于您的特定情况，您可能还需要将其添加到 ion-card-content 中，看起来像

<ion-card-content no-bounce overflow-scroll="false">
</ion-card-content>