【cordova】ページの一番下にスクロールした時にアクションをする方法と注意点

javascript,もといコルドバでページの一番下に到着した時に何らかのアクションを加えたい場合は

addEventListenerを使用して以下のように実装します。

var contents = document.getElementById('order-page')    
contents.addEventListener('scroll', () => {
    const clientHeight = contents.clientHeight // bodyの高さを取得
    const scrollHeight = contents.scrollHeight // windowの高さを取得
    const bottomPoint = scrollHeight - clientHeight  
    contents.addEventListener('scroll', () => {
    // スクロール量が最下部の位置を過ぎたかどうか
    if (bottomPoint <= contents.scrollTop) { 
    }
}

clientHeight=スクロール中のページの高さ

scrollHeight=ページ全体の高さ

clientHeight が scrollHeight に達すればその時点でメソッドが発火するようになっています。

この機能を利用してページャーのような機能を実装することも可能ですが、iphoneでは

ページの一番下に届いたと同時にバウンスしてしまい何度も「到着した」という情報が

伝えられてしまいます。これが悪さを引き起こし、ページャーが連続して機能してしまい

それによって増えたコンテンツによって突然ページの高さがモリモリ高くなってしまう

なんとも奇妙な現象が起きます。

商業用とするとなんとも気持ち悪いので、ページャーとaddEventListener(scroll)を併用するのは

避けて素直にボタンを押してページ更新という流れにしたほうが無難です。