LINE처럼 요소를 추가하면 자동으로 아래로 스크롤

개요

하고 싶은 일

메모

실제로 해봤어요.

코드

    <form id="form" action="" method="get" accept-charset="utf-8">
      <input type="text" name="input" id="input" value="" />
      <button id="button" type="submit">追加</button>    
    </form>
    <div id="container" class='container'>
    </div>

  .container {
    height: 300px;
    background-color: gray;
    overflow: scroll;
    padding: 2px 4px;
  }

  .child {
    height: 55px;
    width: 90%;
    background-color: white;
    border: 1px black solid;
    border-radius: 8px;
    margin-bottom: 4px;
  }

  window.onload = function() {
    var form = document.getElementById('form');
    var input = document.getElementById('input');
    var container = document.getElementById('container');
    
    // チャットを追加する
    var addChat = () => {
      var text = input.value;
      var div = document.createElement("div");
      div.innerText = text;
      div.classList.add('child');
      container.appendChild(div);
      input.value = '';
    };
    
    // 下までスクロールする
    var scrollToBottom = () => {
      container.scrollTop = container.scrollHeight;
    };
    
    // 一番下までスクロールしているかどうか
    var isScrollBottom = () => {
      return container.scrollHeight === container.scrollTop + container.offsetHeight;
    };
    
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      e.stopPropagation();
      // 一番下までスクロールされていれば追加後も一番下までスクロールする
      if (isScrollBottom()) {
        addChat();
        scrollToBottom();
      }
      // 一番下までスクロールされていなければスクロールしない
      else {
        addChat();
      }
    });
  };

해설

overflow: scroll;

Element.scrollTop

끝까지 스크롤 여부

총결산