滚动条未显示在平板电脑上

Question

只是一个简单的问题。 我正在使用 Ionic 3.20.0 开发一个应用程序。 一切正常，除了滚动条的这个小问题。

对于初学者，我在我的app.scss 文件中的ion-content 上设置了overflow:hidden;，它完全可以做到：不要滚动包含我的ion-card 的内容。

在我的ion-card 中，我有两个部分：一个在顶部具有固定内容 (<div class="search-card">...</div>)，第二个是可滚动的行列表 (<div class="scroll"> ...</div>)。 在代码中看起来像这样：

   <ion-content class="no-scroll">
<ion-card>
        <back-button></back-button>
        <div class="search-card">
            <ion-row class="heading-row" padding>
                <ion-col col-12 class="heading-row" text-left>
                    <ion-searchbar placeholder="Nach Name / Firma suchen" debounce="500" showCancelButton="false" color="red" (ionInput)="searchbarInputChanges($event)"></ion-searchbar>
                </ion-col>
            </ion-row>
            <ion-row class="overview-header no-scroll" padding-left>
                <ion-col col-1>Status</ion-col>
                <ion-col col-1>Anrede</ion-col>
                <ion-col col-2>Nachname</ion-col>
                <ion-col col-2>Vorname</ion-col>
                <ion-col col-2>Unternehmen</ion-col>
                <ion-col col-2> Telefon </ion-col>
                <ion-col col-2>E-Mail</ion-col>
            </ion-row>
        </div>
        <div class="scroll">
            <ion-item *ngIf="!getClientCustomers()" text-center class="no-data-notification">
                <ion-icon name="information-circle"></ion-icon><br> Zur Zeit sind noch keine Leads vorhanden.
            </ion-item>

            <div *ngIf="getClientCustomers()" >
                <ion-row class="overview-content" align-items-center *ngFor="let clientCustomer of getClientCustomers()">
                    <ion-col col-1>
                        <span *ngIf="clientCustomer.applicant == 1">Interessent</span>
                        <span *ngIf="clientCustomer.applicant == 0">Kunde</span>
                    </ion-col>
                    <ion-col col-12 col-md-1>
                        <span *ngIf="clientCustomer.gender=='f'">Frau</span>
                        <span *ngIf="clientCustomer.gender=='m'">Herr</span>
                    </ion-col>
                    <ion-col col-12 col-md-2 class="lastname">
                        <a (click)="openLead(clientCustomer)">{{clientCustomer.lastname}}</a>
                    </ion-col>
                    <ion-col col-12 col-md-2>
                        <a (click)="openLead(clientCustomer)">{{clientCustomer.firstname}}</a>
                    </ion-col>
                    <ion-col col-12 col-md-2>{{clientCustomer.company}}</ion-col>
                    <ion-col col-2>{{clientCustomer.phone}}</ion-col>
                    <ion-col col-2>{{clientCustomer.email}}</ion-col>
                </ion-row>
            </div>
        </div>
    </ion-card>
</ion-content>

SCSS：

    no-scroll .scroll-content {
        overflow: hidden;
        .scroll {
            overflow-y: scroll!important;
            height: 79%!important;
            padding: 0 2%;
         }

    }

在我的平板电脑上打开应用程序时，滚动工作正常，但滚动条未显示。我需要它们可见，因为加载数据时有超过 400 行，我需要查看我当前在数据中的位置。

我尝试以不同的方式设置溢出，但无济于事。有没有人对此有想法或解决方案？如果您需要更多信息，请询问。

非常感谢

Answer 1

我刚刚找到了答案。我不知道它是否会帮助任何人，但这就是我所做的。

我在app.scss的末尾添加了这个

::-webkit-scrollbar {
    width: 12px !important;
}
/* Track */
::-webkit-scrollbar-track {
    // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: color($colors,orange) !important;
}

::-webkit-scrollbar-thumb:window-inactive {
    background: #41617D !important;
}
.full-height {
    height: 100%;
}

这是我滚动部分的标记

<ion-scroll scrollY="true"  class="scroll full-height">
            <ion-item *ngIf="!getClientCustomers()" text-center class="no-data-notification">
                <ion-icon name="information-circle"></ion-icon><br> Zur Zeit sind noch keine Leads vorhanden.
            </ion-item>
            <div *ngIf="getClientCustomers()">
                <ion-row class="overview-content" align-items-center *ngFor="let clientCustomer of getClientCustomers()">
                    <ion-col col-1>
                        <span *ngIf="clientCustomer.applicant == 1">Interessent</span>
                        <span *ngIf="clientCustomer.applicant == 0">Kunde</span>
                    </ion-col>
                    <ion-col col-12 col-md-1>
                        <span *ngIf="clientCustomer.gender=='f'">Frau</span>
                        <span *ngIf="clientCustomer.gender=='m'">Herr</span>
                    </ion-col>
                    <ion-col col-12 col-md-2 class="lastname">
                        <a (click)="openLead(clientCustomer)">{{clientCustomer.lastname}}</a>
                    </ion-col>
                    <ion-col col-12 col-md-2>
                        <a (click)="openLead(clientCustomer)">{{clientCustomer.firstname}}</a>
                    </ion-col>
                    <ion-col col-12 col-md-3>{{clientCustomer.company}}</ion-col>
                    <ion-col col-3>{{clientCustomer.email}}</ion-col>
                </ion-row>
            </div>
        </ion-scroll>