0

アプリのさまざまな部分からイオンモーダルにポップアップする再利用可能な同意フォームコンポーネントがあり、クライアントが受け入れている/拒否している特定の同意または合意に応じて異なるテキストが入力されます (利用規約/ユーザー合意/コンプライアンスのもの/等。)。

テキスト/サブテキストの最後に、スクロール チェックポイントとして div があります。

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

契約/同意に同意するボタンには、[disabled]="!canAccept" プロパティ バインディングがあり、ユーザーが契約に含まれるテキストを読んだことを確認します。

私の .ts ファイルでは、次の要素を viewchild します。

@ViewChild('scrollCheckpoint') scrollCheckpoint: ElementRef;

また、canAccept 変数を設定/設定解除する 2 つの方法があります。

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 で完全に機能し、ユーザーがテキストをスクロールするまでボタンは有効として表示されません。

問題は、すべてのテキスト (およびスクロール div) が既に表示されている場合でも、ボタンをアクティブにするために、ユーザーが (ほんの数ピクセルでも) スクロールすることを強制される iOS にあります。テキストがすべてウィンドウに既に含まれている場合、ボタンをアクティブとして表示したいのは明らかです。

これは非常に些細なことですが、ここで最高のユーザーエクスペリエンスを得ようとしています. 他の誰かがこの問題に遭遇したか、回避策/解決策を知っていますか?

4

1 に答える 1