チャット履歴スクロール自動追従

<div class="d10-06-08-wrap">
          <div class="d10-06-08-scroll">
            <div class="d10-06-08-msg d10-06-08-me">導入方法を教えてください</div>
            <div class="d10-06-08-msg d10-06-08-ai">まずプラグインをインストールします。</div>
            <div class="d10-06-08-msg d10-06-08-me">ありがとうございます</div>
          </div>
        </div>

.d10-06-08 .d10-06-08-wrap{width:100%;max-width:220px}
        .d10-06-08 .d10-06-08-scroll{height:150px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px;scroll-behavior:smooth}
        .d10-06-08 .d10-06-08-scroll::-webkit-scrollbar{width:4px}
        .d10-06-08 .d10-06-08-scroll::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:2px}
        .d10-06-08 .d10-06-08-msg{max-width:82%;padding:8px 12px;border-radius:12px;font-size:11.5px;line-height:1.6}
        .d10-06-08 .d10-06-08-me{align-self:flex-end;background:#6366f1;color:#fff;border-bottom-right-radius:3px}
        .d10-06-08 .d10-06-08-ai{align-self:flex-start;background:#f1f2f6;color:#374151;border-bottom-left-radius:3px}

(function(){
          var root = document.currentScript.closest('.item');
          var scroll = root.querySelector('.d10-06-08-scroll');
          var msgs = ['承知しました、対応します。', 'こちらが回答になります。', '他にご質問はありますか？', 'はい、お願いします。', 'ありがとうございます！'];
          var i = 0;
          setInterval(function(){
            var div = document.createElement('div');
            div.className = 'd10-06-08-msg ' + (i % 2 === 0 ? 'd10-06-08-ai' : 'd10-06-08-me');
            div.textContent = msgs[i % msgs.length];
            scroll.appendChild(div);
            if(scroll.children.length > 6){
              scroll.removeChild(scroll.firstElementChild);
            }
            scroll.scrollTop = scroll.scrollHeight;
            i++;
          }, 2200);
        })();