Question

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

对于初学者，我在overflow:hidden;文件的ion-content上设置了app.scss，它完全符合预期：不滚动包含我的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>

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

1 个答案: