スクロールの方向を反対にしたい

LINEのようなチャットができるサイトを作っています。
通常サイトをスクロールするときは上から下にスクロールしていきますがチ他のチャットサービスのように下から上にスクロールする使用にしたいと思っています。

デフォルトで一番下を表示するのはJavaScriptを用いたら良いのでしょうか。

kei344

2019/12/28 12:00

https://teratail.com/help/question-tips#questionTips1-2

m.ts10806

2019/12/28 12:45

チ他の　とは？あとこの質問内容だと >デフォルトで一番下を表示するのはJavaScriptを用いたら良いのでしょうか。「だけとは限りません」だけのアドバイスが来ても文句は言えません。自身が調べたこと試したことをきちんと書きましょう。

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

回答2件

自分もつい先日LINE風チャットを作りましたが、
スクロールに関してはJavaScriptで実装しました。
JavaScriptでスクロール位置を操作する方法があるので、それを検索したらすぐに出来ると思います。

投稿2019/12/28 23:49

H40831

総合スコア975

JavaScriptでいいと思いますよ。

たとえば#parentという範囲でメッセージ追加時にスクロールさせる関数はこうなります。

// 追加時にスクロール
function scroll(){
	var parent = document.getElementById("parent");
	var bottom = parent.scrollHeight - parent.clientHeight;
	parent.scroll(0, bottom);
}

上の関数を用いてスクロールする流れを作ってみたのでよかったら以下お試しください。

html
1<html lang="ja">
2<head>
3
4  <style>
5    #parent {
6      position: fixed;
7      background: #1a1a1a;
8      height: 300px;
9      bottom: 0;
10      overflow-y: scroll;
11      padding: 20px;
12    }
13    p {
14      display: flex;
15      align-items: center;
16      justify-content: start;
17      background: #1b7ecf;
18      width: 200px;
19      padding: 20px;
20      border-radius: 10px;
21      color: white;
22    }  
23  </style>
24  
25</head>
26
27<body>
28
29  <div id="parent">
30    <p>hello</p>
31  </div>
32  
33  <script>
34
35  // メッセージの追加方法
36  var parent = document.getElementById("parent");
37  var prevMes = '<p>これはhelloの上に追加される</p>';
38  var nextMes = '<p>これはhelloの下に追加される</p>';
39  parent.insertAdjacentHTML( 'beforeend', nextMes );
40  parent.insertAdjacentHTML( 'afterbegin', prevMes );
41
42  // メッセージ受信時とスクロール
43  var i = 1;
44  function addNewMes(){
45
46    // 当サンプルのためのメッセ―ジ数制限
47    if( i > 10 ) return;
48
49    // メッセージ追加
50    var newMes = '<p>新しいメッセージ'+i+'</p>';
51    parent.insertAdjacentHTML( 'beforeend', newMes );
52
53    // 追加時にスクロール
54    scroll();
55
56    // 当サンプルのためのメッセージ番号
57    i++;
58
59    // 当サンプルのためのタイマー
60    setTimeout(addNewMes, 1000);
61  } 
62  addNewMes();
63
64  // 追加時にスクロール
65  function scroll(){
66    var parent = document.getElementById("parent");
67    var bottom = parent.scrollHeight - parent.clientHeight;
68    parent.scroll(0, bottom);
69  }
70  </script>  
71  
72</body>
73
74</html>