Ioni c 5 WKWebView iOS проблема плавной прокрутки - PullRequest
Новая
       87

Ioni c 5 WKWebView iOS проблема плавной прокрутки

0 голосов
/ 25 мая 2020

У меня есть список кнопок вверху моей страницы, и когда вы нажимаете кнопку, страница плавно прокручивается до целевого div. Он отлично работает в Android и в Интернете, но когда я пробую его на iOS, прокрутка устройства мгновенно переходит в div и вызывает некоторую ошибку пользовательского интерфейса для списка кнопок.

Это мой код для прокрутки: 

subCatDiv.scrollIntoView({ block: 'start', behavior: 'smooth', inline: "start" });

Информация: 

Ionic:

   Ionic CLI                     : 6.9.1 (/Users/suatkarabacak/npm/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 6 other plugins)

Utility:

   cordova-res : 0.14.0
   native-run  : 1.0.0

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.2
   NodeJS     : v10.16.3 (/usr/local/bin/node)
   npm        : 6.9.0
   OS         : macOS Catalina
   Xcode      : Xcode 11.3 Build version 11C29

Я использую плагин WKWebView.

Также применил это css правило как глобальное: 

* {
    -webkit-overflow-scrolling: touch;
}

Вот мой HTML, я нажимаю кнопку из этого списка. 

<div class="sub-categories">
    <ion-slides class="sub-categories-slides" #subcatslides (ionSlideDidChange)="subCategoryChangedFromSlide($event)"
      [options]="subSlideOpts">
      <ion-slide *ngFor="let cat of categories;index as k">
        <ng-container *ngFor="let sub of sub_categories;index as i">
          <button *ngIf="cat.objectId==sub.category.objectId" class="sub-cat" (click)="chooseSubCategory($event,i,k)">
            {{sub.name}}</button>
        </ng-container>
      </ion-slide>
    </ion-slides>
  </div>

И прокручиваю до вида здесь: 

<ion-content overflow-scroll=“true” class="has-header">
  <div class="product-container">
    <ion-slides #productslider class="cat-slides" (ionSlideDidChange)="categoryChangedFromSlide($event)"
      [options]="slideOpts">
      <ion-slide class="cat-slide" *ngFor="let cat of categories;index as k">
        <ng-container *ngFor="let sub of sub_categories;index as i">
          <div [id]="'sub-cat-'+i+'-'+k" *ngIf="cat.objectId==sub.category.objectId" class="sub-products">
            <label *ngIf="i!=0" class="sub-cat-label">{{sub.name}}</label>
            <div class="products">
              <app-product-list [sub_category_id]="sub.objectId">
              </app-product-list>
            </div>
          </div>
        </ng-container>
      </ion-slide>
    </ion-slides>
  </div>
</ion-content>
...