Bootstrapを使ってチャットっぽいCSSデザインについて知りたい。

サンプルコード
Codepen

#実現したいこと
LINEやSlackみたいに、最新のメッセージが一番下に来るようにしたい。

#困っていること
メッセージ量が多くなると、自然にbottom:0;付近に最新のメッセージが来るようになるが、2，3件しかメッセージがない時に、bottom: 0;の位置にメッセージを置くことが出来ずに困っている。

#試したこと
position: abosoluteとbottom:0;を明示的に書くことによってしたいにメッセージが来るようにはなるが、そうするとメッセージが溜まってきたときにスクロールが出来なくなってしまいます。
週末かけて、いろいろ私なりに調査しながら試してみましたがどうしてもうまくいかずにいるのでご教示いただけると幸いです。

html
1<body>
2  <div class="container area bg-light">
3    <div class="messages">hoge</div>
4    <div class="messages">これをbottom: 0の位置にくるようにしたい</div>
5  </div>
6</body>
7</html>

css
1.area {
2  height: 50vh;
3  overflow: auto;
4}

m.ts10806

2019/08/19 01:45

設定によるのかもしれないですけど、LINEってスクロールするまでもないときって画面下側に詰まってないですよね。あくまで「最上部が一番古いメッセージでその下に積み重なっている（要は投稿日時昇順）」だけだと思うのですけど。

nanase21

2019/08/19 01:59

今確かめてみたところ確かにそうでした。他のチャット機能でも確かめてみたところの同じ仕様だったのでこの質問は必要ないかもしれないので閉じさせていただきます。ご指摘ありがとうございました。

m.ts10806

2019/08/19 02:03

こちらのコメント欄は非表示ですので、回答には具体的に記載されたほうが良いと思います（仕様的なところを見直す・・・という感じですよね）

行動規範の内容に同意します

回答2件

ベストアンサー

jQuery使います。

HTML
1<body>
2  <div class="container area bg-light" id="hoge">
3    <div class="messages">hoge</div>
4    <div class="messages">これをbottom: 0の位置にくるようにしたい</div>
5  </div>
6</body>
7</html>

CSS
1.area {
2  height: 50vh;
3  overflow-y: scroll
4}

JavaScript
1window.onload = function() {
2  $('#hoge').animate({scrollTop: $('#hoge')[0].scrollHeight}, 'fast');
3}

JavaScriptのタイミングは適当に変えてください。

追記

比較演算子の調整が必要かも

HTML
1<body>
2  <div class="container area bg-light" id=hoge>
3    <div id=messages>
4      <div class="message">hoge</div>
5      <div class="message">hoge</div>
6      <div class="message">hoge</div>
7      <div class="message">hoge</div>
8      <div class="message">hoge</div>
9      <div class="message">hoge</div>
10      <div class="message">hoge</div>
11      <div class="message">hoge</div>
12      <div class="message">hoge</div>
13      <div class="message">hoge</div>
14      <div class="message">hoge</div>
15      <div class="message">hoge</div>
16      <div class="message">hoge</div>
17      <div class="message">hoge</div>
18      <div class="message">hoge</div>
19      <div class="message">hoge</div>
20      <div class="message">hoge</div>
21      <div class="message">hoge</div>
22      <div class="message">hoge</div>
23      <div class="message">hoge</div>
24      <div class="message">hoge</div>
25      <div class="message">hoge</div>
26      <div class="message">hoge</div>
27      <div class="message">hoge</div>
28      <div class="message">hoge</div>
29      <div class="message">hoge</div>
30      <div class="message">hoge</div>
31      <div class="message">hoge</div>
32      <div class="message">hoge</div>
33      <div class="message">hoge</div>
34      <div class="message">hoge</div>
35      <div class="message">hoge</div>
36      <div class="message">hoge</div>
37      <div class="message">hoge</div>
38      <div class="message">これをbottom: 0の位置にくるようにしたい</div>
39    </div>
40  </div>
41</body>

CSS
1.area {
2  height: 50vh;
3  overflow-y: scroll
4}

JavaScript
1window.onload = function() {
2  var aH = window.innerHeight / 2;
3  var mH = $('#messages').outerHeight();
4  if (mH<aH) {
5    var offset = $('#messages').offset({top:aH-mH});
6  } else {
7    $('#hoge').animate({scrollTop: $('#hoge')[0].scrollHeight}, 'fast');
8  }
9}