JavaScriptを使って自動スクロール

どうも。
3週間ぶりぐらいのブログです。

現在、Node.jsを使ってチャットを制作しています！
元々は、講義の課題だったんですが、色々と機能を拡張中です。
見た目は、完全にL○NEです（笑）

自分は、サーバサイドを担当するのが好きで
フロント側はあまりやったことがないので、L○NEもどきのUIにするのに苦戦しました…

で、現状の仕様だと
メッセージがサーバから送られてくると、下にどんどん追加される形です。
その場合だと入力/受信したら、わざわざ一番下までスクロールする必要があります。
なので、メッセージを追加されたら、自動的に最新のメッセージまでスクロールする仕様に変更したいと思います。

仕様

まず、それぞれのメッセージに対して動的にid（msg_id）を付与させます。
そして、メッセージが追加されたら、一番新しいIDの位置にスクロールしたいと思います。

jQuery

まず、メッセージにidが付与されていることを前提に話を進めたいと思います。
無難にjQueryを使って、付与したメッセージの絶対位置を求めたいと思います。

var positionY = $("#" + msg_id).offset().top;

正しく位置情報が取得できてるっぽいので、この値の位置に移動したいと思います。

$("#___id___").scrollTop(positionY);

おぉー、これで移動ができます。
しかし、なぜか18個目以降のメッセージになるとスクロール位置がおかしくなります…！
よくよく調べてみると、絶対位置の値がおかしくなっています。
ググッてみると、jQueryのoffsetを用いると、値がバグるとか…
なので、jQueryを使わないでいこうと思います。

ネイティブJavaScript

次に、生のJavaScriptで試してみたいと思います。

　var element = document.getElementById("msg_id");
　var rect = element.getBoundingClientRect();
　var positionY = rect.top;
　element.scrollTo(0, positionY);

しかし、同様に18個目以降のメッセージで位置がおかしくなっています…
次に、getBoundingClientRectではなく、offsetTopで位置を求めてみたいと思います。

　var element = document.getElementById("msg_id");
　var positionY = element.offsetTop; // 変更点
　element.scrollTo(0, positionY);

おぉぉぉ、うまく行っています！
これで一件落着です。

最近、JavaScript/Node.jsを勉強していますが、
JavaScriptはデバックしづらいので、好きじゃないですね…