javascript スクロール 下からの位置を取得する方法

Question

メッセージを受け取り下に追加していくアプリです（Lineのような）

<div  id="log">
ここにメッセージが追加されます。
</div>

//自動更新
$(function(){
  function buildMESSAGE(message) {
    var messages = $('#log').append('<div class="messages" data-id=' + message.id + '><p>' + message.content + '</p></div>');
  }


  //スクロール検出
  // スクロールさせる要素を取得
  var elm = document.getElementById('log');

  // 要素の表示領域を取得
  var height = elm.offsetHeight;
  var scrollHeight = elm.scrollHeight;

    // 要素のスクロール位置を取得
  var scrollTop = elm.scrollTop;

    // 現在の表示位置の高さ 
  var scrollPosition = height + scrollTop;

    // どれだけ近づいたかを判断する値
    // 0に近いほど、スクロールの最終が近い
  var proximity = 0;
  

  $(function(){
    setInterval(update, 10000);
  });
  function update(){ 
    if($('.messages')[0]){ 
      var message_id = $('.messages:last').data('id'); 
    } else { 
      var message_id = 0 
    }
    $.ajax({ 
      url: location.href,
      type: 'GET', 
      data: { 
        message: { id: message_id } 
      },
      dataType: 'json' 
    })
    .always(function(data){ 
      $.each(data, function(i, data){ 
        buildMESSAGE(data); //buildMESSAGEを呼び出す

　　　　//＊＊＊＊↓質問はこのポイントです。＊＊＊＊
        if ((scrollHeight - scrollPosition) / scrollHeight <= 0) {
          処理
        };
      });
    });
  }
});

質問したい所は、ajaxでメッセージを受信した時の処理です。
if文分岐したいのですが、
一番下にスクロールバーがある状態でメッセージを受け取ったら処理をする。
それ以外なら処理は行わない　としたいのですが、if文が間違っているのか、
どの位置にスクロールバーがあっても処理が行われてしまいます。

スクロールバーの位置の取得が間違っているのかと思われるのですが、
調べ試したのですが全く同じでどの状況でも処理されてしまいました。

正しいjavascriptでページの下からの位置を取得する方法を教えてください。

Comments

[yasutomi]

こちらをお読みください。

質問するときのヒント
https://teratail.com/help/question-tips

[m.ts10806]

調べ方次第で幾らでもヒントは見つかるかと思います。調べて試したことを記載してください

[yasutomi]

コード内に**があると動作しないので
正しく動作するコードの記載をお願いします。

Answer 1

スクロール状況は変化するのでその都度取り直さないといけません。

    var isBottom = elm.scrollHeight - elm.clientHeight - elm.scrollTop < 1;

buildMESSAGE(data); でコンテンツを追加しているのであれば、スクロールバーが一番下に来ることはないのではないでしょうか？
そうであればチェックのタイミングは $.each() よりも前ということになります。
コンテンツ追加のためだけに ajax を使っているのであれば、無駄な通信をしないためにもその前にチェックしてもいいかもしれません。

Answer 2

DOM要素から取得する場合、次のリンク先の情報が役立ちそうです。

Qiita - 結局「下からのスクロール位置」を取得するにはどうすればいいのか (@hoto17296)

function getScrollBottom() {
var body = window.document.body;
var html = window.document.documentElement;
var scrollTop = body.scrollTop || html.scrollTop;
return html.scrollHeight - html.clientHeight - scrollTop;
}