在 iOS 上滚动之前，Ionic Modal 无法将元素识别为 "in view"

Question

我有一个可重复使用的同意书组件，它以离子模式从应用程序的各个部分弹出，根据客户的特定同意或协议使用不同的文本填充它accepting/declining（[的条款=38=] agreement/compliance stuff/etc.).

在 text/subtext 的末尾，我有一个 div 作为滚动检查点：

<div #scrollCheckpoint id="scrollCheck"></div>

用于接受 agreement/consent 的按钮具有 [disabled]="!canAccept" 属性绑定，以确保用户已阅读协议中包含的文本。

在我的 .ts 文件中，我查看子元素：

@ViewChild('scrollCheckpoint') scrollCheckpoint: ElementRef;

并且有两种方法 set/unset canAccept 变量：

private onScrolled() {
    if (!this.canAccept){
        this.canAccept = this.isElementInViewport(this.scrollCheckpoint.nativeElement);
        this.cd.detectChanges();
    }       
}

和

private isElementInViewport(el: HTMLElement) {
    var bounding = el.getBoundingClientRect();
    return (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

我还应该提到我有一个 ionViewDidLoad 方法，它甚至可以在加载时进行初始检查：

ionViewDidLoad(){
    this.canAccept = this.isElementInViewport(this.scrollCheckpoint.nativeElement);
}

这在 Android 或 Web 上完美运行，并且在用户滚动浏览文本之前按钮不会显示为已启用。

问题出在 iOS 用户被迫滚动（即使只是几个像素）以便激活按钮，即使所有文本（以及滚动 div) 已经在视图中。如果文本全部包含在 window 中，我显然希望它显示按钮处于活动状态。

我知道这太琐碎了，但只是想在这里获得最佳的用户体验。有其他人运行了解这个问题或知道 workaround/solution 吗？

Answer 1

我知道回答您自己的问题可能很蹩脚，但这也许会对其他人有所帮助。我发现 iOS 设备在正确计算 getBoundingClientRect() 值时必须有延迟，所以如果我将支票放在 ionViewDidEnter() 而不是 ionViewDidLoad() 中，它足以解释延迟，所以我有正确的检查按钮是否应为 enabled/disabled.

时的初始值

在 iOS 上滚动之前，Ionic Modal 无法将元素识别为 "in view"

Ionic Modal doesn't recognize element as "in view" until scroll on iOS

scroll

modalviewcontroller

getboundingclientrect

ionic-framework

ionic3