スマフォで最下部までスクロールした時に処理実行する仕組み作ってみた

チャット形式でエンドユーザーとクライアントがマッチングするサービスを提供しており、
「①質問を表示する、②回答を入力する」がワンセットで繰り返し表示される仕組み。
回答入力後フォーカスを外すことで次の質問を表示できるが、
フォーカスを外せないエンドユーザーが続出した為、
最下部でスクロールした時はフォーカスを外す処理を実装した。
　　

jQuery

$(window).on('touchend', function(){ // ー①

    // 現状のスクロールの位置＋要素が表示されている領域の高さ
    const windowHeight = $(window).scrollTop() + window.innerHeight; // ー②,③

    // 表示されている要素の高さ
    const scrollHeight = $('html').get(0).scrollHeight; // ー④

    // 以下の式が成り立つ時、現在当たっているフォーカス外す
    if (scrollHeight < windowHeight) { // ー⑤
        $(':focus').blur();
    }
});

　　

主な動作の流れ

①スマフォ画面から手が離れた瞬間にイベント発火。
②現在表示されている要素の高さを取得。（図１-A）
③現状のスクロールの位置取得。（図１-B上）
④スマフォ画面の表示領域の高さ取得。（図１-B下）
　※この表示領域にキーボードは含まれない。
⑤「A ＜ B」が成り立つ時、現在当たっているフォーカスを外す。

## 苦労したこと スマフォでキーボードが出ている時と、出ていない時とで表示領域が変わる。 状況によって変わる値をどうやって取得できるかを調べるのに時間がかかった。 （window.innerHeightで取得できる。）