はい、こんばんは。
本日はchat-spaceをデプロイ、本番環境での動作確認を行ってもらっていました。
その中で、自動スクロール機能に関してアウトプットしたいと思います！！
自動スクロール機能とは
メッセージを送った時に、自動でメッセージを表示してくれる機能のことですね。
Lineなんかでもおなじみの機能です。
https://i.gyazo.com/b1ea791abf66615ee076c9651d75bc42.mp4
気になる方のために、Gyazoにて撮影いたしましたので、ぜひご確認ください。
さて、紹介していこうと思います。
非同期通信の実装の中でコードを記述して行きました。
今回は.animateというメソッドを用いて実装していくことにします。
.animateメソッドとは
その名の通り、アニメーションを実装するためのメソッドで、オブジェクトの移動や透過率などを変更することができます。
使い方は以下の通りになります。
$(function(){
$(‘動かす要素名’).animate({‘動かすアニメーション名’:’動かす距離’
})；
});
となります。
今回はscrollTopメソッドと組み合わせて使用します。
scrollTop()とは
ブラウザの画面をスクロールした時のスクロール量を取得できるメソッドです。
さて、実際にコードを未定klうと、下記のようになりました。
ちなみに、スクロールさせたい要素を正確に指定してあげないといけませんので、検証を有効活用しましょう。
これをある部分に記述してあげることで、自動更新機能が簡単に実装できます！！
皆様の検討をお祈りいたします！！
コメント