以前から気になっていた機能が、どのように実装されているかわかって感動した話 @TECH CAMP#12

　どうも、とだです。
　今日はちょっとだけ書かせていただきます。

　以前から、Webページの特定のエリアだけスクロールできたり、何か投稿するとその分ページがせり上がるように自動的にスクロールされるのを見て「すげえなあ」と子供のように感動していました。最近、その機能の実装を学んだので手短にアウトプットしようと思います。

オーバーフローした時にスクロールできるようにする

　例えばチャットが投稿できるWebページがあったとして、メインであるチャットが表示されているところのエリアにたくさんの「投稿されたチャット」というデータがたくさんある時、一部のデータしか表示されなかったり、データによってビューが崩れてしまったらいけませんよね？
　これを解決してくれるのが

overflow: scroll;

　です。指定したいdiv要素にCSSでoverflow: scroll;プロパティが指定できていれば、縦にスクロールでき、綺麗なビューを保てます。

投稿データを送信したら投稿したものが表示されているエリアの最下部まで自動でスクロールする

　先ほど同様のWebページがあるとして、チャットを投稿したらそのチャットが表示されている場所（今回は最下部だとすると）まで自動でスクロールしてくれる機能はjQueryのanimateメソッドが叶えてくれます。

jQueryのanimateメソッドはメソッドを利用したオブジェクト(レシーバ)が持つプロパティなどを、指定した値まで徐々に変化させることができるメソッドです。

　今回のような機能を実装するにはanimateメソッドを以下のように使います。実装したい部分のHTMLのdiv要素のクラスは「messages」だとすると以下のようになります。

$('.messages').animate({ scrollTop: $('.messages')[0].scrollHeight});

　scrollTopもjQueryのメソッドで、指定した値の分だけanimateメソッドを利用した要素をスクロールしてくれます。
　$('.messages')[0].scrollHeightの部分は、メッセージが入ったdiv要素のスクロールできる高さの数字を取得しています。
　つまり、上記のように書くことによってスクロールすべき分だけ、投稿されたチャットが入ったdiv要素をスクロールできます。

おしまい

　TECH CAMPで学んでいく中で、日常で気になっていたことがこうやってわかるようになると本当に感動します。「へえええ！！！！」なんて独り言を言いながら家で楽しんでいます。今後も様々な機能を自分で実装できるようになるために学習を頑張って進めていこうと思います。
　今度から週に1回だけ教室に行けるようになったので、それも楽しみにしながら頑張りたいと思います。