なるの備忘録

エンジニアリングそして営業ができるエンジニアに向けて、日々学んだことをアウトプットしていきます。

jQueryでほぼ一行で、ページを開くとスクロールして一番下の文章を表示させるテキストエリアを作成

ページを開くとスクロールして一番下の文章を表示させるテキストエリアを作ります。

履歴一覧など、ユーザには基本的には最新の情報を見せたいけど、過去の内容も見せたいってときに使えそうですね。
jQueryでほぼ一行で実装可能です。

動作イメージ

ページを開いた瞬間からテキストボックスの中が自動的にスクロールされます。
f:id:narunaru7638:20190412002216p:plain
あっという間に一番下の文章が表示されます。

テキストボックスの中でスクロールすると一番最初の文章まで見られます。

論よりコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charaset = "utf-8">
    <title>勇者とモンスター</title>
    <link rel="stylesheet" type="text/css" href="style.css?<?php echo date("YmdHis"); ?>">
</head>
    <body>
        <header>
        </header>
        <div id="main" class="site-width">
              <!-- メッセージエリア -->
                    <!-- JSで操作するようのクラスをメッセージエリアに用意する-->
                    <div class="message-area js-auto-scroll">
                        <p>今日は何をしますか？</p>
                        <p>あああああああああああああああああああ</p>
                        <p>あああああああああああああああああああ</p>
                        <p>あああああああああああああああああああ</p>
                        <p>いいいいいいいいいいいいいいいいいいい</p>
                        <p>いいいいいいいいいいいいいいいいいいい</p>
                        <p>いいいいいいいいいいいいいいいいいいい</p>
                        <p>ううううううううううううううううううう</p>
                        <p>ううううううううううううううううううう</p>
                        <p>一番下です</p>
                    </div>
        </div>

        <script src="js/vendor/jquery-2.2.2.min.js"></script>
        <script>
            //自動スクロール
            //メッセージエリアのDOMを変数に格納
            var $scrollAuto = $('.js-auto-scroll');
            //animate関数で利用できるプロパティは数値を扱うプロパティの値を簡単に変化させることができる関数
            //scrollTop()」は、ブラウザの画面をスクロールした時の位置（スクロール量）を取得できるメソッド。引数を設定することで任意のスクロール位置まで移動させることが可能
            //scrollHeightは、あふれた(overflowした)画面上に表示されていないコンテンツを含む要素の内容の高さ
            //scrollTopの要素をscrollHeightに徐々に変化させている
            $scrollAuto.animate({scrollTop: $scrollAuto[0].scrollHeight}, 'slow');
    
        </script>
    </body>
</html>

CSS

/*
======================================
サイト全般レイアウト
======================================
*/
/*リセットCSS*/
*{
    text-decoration: none;
    padding: 0px;
    margin: 0px;
    color: rgba(0,0,0,0.87);
}
.site-width{
    width: 100vw;
}
body{
    background-color: rgb(252, 215, 161);
}

/*
======================================
メインゲーム画面
======================================
*/
/*メッセージエリア*/
.message-area{
    background-color: darkgrey;
    width: 90%;
    height: 400px;
    /* メッセージエリアにoverflow: scroll;を指定*/
    overflow: scroll;
    margin: 2vw 2vw;
}
.message-area p{
    font-size: 3.5vw;
    -webkit-text-size-adjust:100%;
    padding: 1vw;
}

ポイントまとめ

・スクロールさせるメッセージエリアにoverflow: scroll;を指定
・animate関数とscrollTopを利用して、任意のスクロール位置まで、プロパティの値を変化させる
・scrollHeightは、あふれた(overflowした)画面上に表示されていないコンテンツを含む要素の内容の高さを取得
・scrollTopの要素をanimate関数でscrollHeightに徐々に変化させることで、ページを開くとスクロールして一番下の文章を表示させるテキストエリアを実現