<div class="container">
  <div>
    <h2>留言區</h2>
    <ul class="comments">
      
    </ul>
  </div>
  <div>
    <h2>留言區(overflow-anchor)</h2>
    <ul class="comments-new">
      <li class="anchor"></li>
    </ul>
  </div>
  <button onclick="stop()">stop</button>
</div>
* {
  box-sizing: border-box;
}

.comments-new {
  display: block;
  list-style: none;
  padding: 10px;
  width: 300px;
  height: 500px;
  background-color: #efefef;
  overflow-y: auto;
  & > * {
    overflow-anchor: none;
  }
  
  .anchor {
    display: block;
    overflow-anchor: auto;
    height: 20px;
  }
}

.container {
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.comments {
  display: block;
  list-style: none;
  padding: 10px;
  width: 300px;
  height: 500px;
  background-color: #efefef;
  overflow-y: auto;
}

.comment {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  color: #333;
}
View Compiled
const names = [
  'kalan',
  'jack',
  'david',
  'wan',
  'aa.bb.cc',
];

const randomString = [
  'How are you?',
  '新手駕駛反而是安全的,因為一旦開始鬆懈,就是危險的開始。',
  '如果汽車可以肆無忌憚地按喇叭,我們是否也可以對看不順眼的東西按喇叭',
  '這次的作品是從一輛汽車的角度出發,這已經不是伊坂第一次嘗試了,《死神系列作》、《夜之國的庫帕》,都是以非人類的角度來作描寫,觀察人類。',
  '喇叭似乎只是為了發洩憤怒而存在的。',
  '為什麼人類那麼喜歡這種原始而粗暴的方式呢?',
  '那麼行人也應該配戴喇叭',
  '但他並不以為意',
  '因為他知道這是人性下的醜陋',
  '只要有人跟一般人不同,就會有霸凌的存在,因為暴力讓人感覺很爽。',
  '因為這件事更有趣不是嗎?大家都想看,所以就會有人去寫這種報導。',
  '正如人類中有好人跟壞人,記者也有分好記者跟壞記者,這次是介紹好的記者',
  '咦?你怎麼變得那麼乖,這樣怎麼當記者?',
  '「鏡頭具有抑制對方行為的力量」,所以在拍攝的時候都有種優越感',
  '就好像有人可以自私地害得整條高速公路都塞車一樣、就好像有人會把全世界的號誌燈都當作綠燈一樣。',
  '就好像媽媽說吃青椒才可以吃甜點那樣嗎?',
  '在小說進入尾聲階段時,亨曾經鼓勵圭一,希望他可以走出被霸凌的陰影,勇敢起身對抗。',
  '我很喜歡伊坂幸太郎的原因在於他總是能夠把一些生活當中的事情揉合進劇情,讓讀者們一起親身經歷那種感覺。',
];

function createComment(content) {
  const el = document.createElement('li');
  const name = names[Math.floor(Math.random() * names.length)];
  
  el.textContent = `${name}: ${content}`;
  el.classList.add('comment');
  return el;
}

const comments = document.querySelector('.comments');

const commentsNew = document.querySelector('.comments-new');

const anchor = document.querySelector('.anchor');
function appendNew(comment) {
  commentsNew.insertBefore(comment, anchor);
}
function append(comment) {
  comments.appendChild(comment);
  if (comments.offsetHeight < comments.scrollHeight && comments.scrollTop +  comments.offsetHeight + 100 > comments.scrollHeight) {
      comments.scrollTop = comments.scrollHeight - comments.offsetHeight;  
  }
}


let id = setInterval(() => {
  const content = randomString[Math.floor(Math.random() * randomString.length)];
  appendNew(createComment(content));
  append(createComment(content));
}, 500);
  

function stop() {
  clearInterval(id);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.