스마트 폰으로 맨 아래로 스크롤했을 때 처리 실행하는 구조를 만들어 보았습니다.

채팅 형식으로 최종 사용자와 클라이언트가 일치하는 서비스를 제공하고 있으며,
「①질문을 표시한다, ②응답을 입력한다」가 원세트로 반복 표시되는 구조.
답변 입력 후 포커스를 제거하여 다음 질문을 볼 수 있지만,
포커스를 풀 수없는 최종 사용자가 속출했기 때문에,
최하부에서 스크롤했을 때는 포커스를 제거하는 처리를 실장했다.
　　

jQuery

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

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

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

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

　　

주요 동작 흐름

①스마포 화면에서 손이 떨어진 순간에 이벤트 발화.
② 현재 표시되어 있는 요소의 높이를 취득. (도 1-A)
③현재의 스크롤의 위치 취득. (도 1-B 위)
④ 스마트폰 화면의 표시 영역의 높이 취득. (도 1-B 아래)
※이 표시 영역에 키보드는 포함되지 않는다.
⑤「A＜B」가 성립할 때, 현재 맞고 있는 포커스를 떼어낸다.

힘든 일

스마트 폰으로 키보드가 나올 때와 나오지 않을 때로 표시 영역이 바뀝니다.
상황에 따라 달라지는 값을 어떻게 얻을 수 있는지 알아내는 데 시간이 걸렸다.
(window.innerHeight에서 얻을 수 있습니다.)