プログラミング勉強中!!

TECH::EXPERT 40期 受講生の筆者がその日学んだことをアウトプットしていくブログです。学習量によっては全て書ききれないこともあります。お気付きのことありましたバシバシコメントください!!3月中旬よりWEBエンジニアとして働くことになりました。日々の業務などについても発信させていただきたいと思います!!よろしくお願いいたします!!

自動スクロール機能の実装(本当に必要です!!)

はい、こんばんは。

 

本日はchat-spaceをデプロイ、本番環境での動作確認を行ってもらっていました。

 

その中で、自動スクロール機能に関してアウトプットしたいと思います!!

 

自動スクロール機能とは

メッセージを送った時に、自動でメッセージを表示してくれる機能のことですね。

 

Lineなんかでもおなじみの機能です。

 

https://i.gyazo.com/b1ea791abf66615ee076c9651d75bc42.mp4

 

気になる方のために、Gyazoにて撮影いたしましたので、ぜひご確認ください。

 

さて、紹介していこうと思います。

非同期通信の実装の中でコードを記述して行きました。

 

今回は.animateというメソッドを用いて実装していくことにします。

 

.animateメソッドとは

その名の通り、アニメーションを実装するためのメソッドで、オブジェクトの移動や透過率などを変更することができます。

 

使い方は以下の通りになります。

$(function(){

    $('動かす要素名').animate({'動かすアニメーション名':'動かす距離'

 });

});

となります。

 

今回はscrollTopメソッドと組み合わせて使用します。

scrollTop()とは

ブラウザの画面をスクロールした時のスクロール量を取得できるメソッドです。

 

さて、実際にコードを未定klうと、下記のようになりました。

 

f:id:g1034725:20181204005631p:plain

 

ちなみに、スクロールさせたい要素を正確に指定してあげないといけませんので、検証を有効活用しましょう。

 

これをある部分に記述してあげることで、自動更新機能が簡単に実装できます!!

 

皆様の検討をお祈りいたします!!