Streamlabs Chat Box - Scrolling Sideway

chatbox.css

body {
  background: $background_color;
  color: $text_color;
  font-size: $font_size;
}

.colon, .name {
  height: 0px;
}

html, body {
  height: 100%;
  overflow: hidden;
}
body {
  margin: 0;
}

#custom_html {
  height: 100%;
  vertical-align: bottom;
}

.sl__chat__layout {
  font: 1em "Helvetica Neue",Helvetica,Arial,sans-serif;
  position: absolute;
  bottom: 0;
  padding-top: 0.1em;
  box-sizing: border-box;
}

/* text outline */
.text_outline {
  text-shadow: 
    -1px -1px 1px black, 
    1px -1px 1px black, 
    -1px 1px 1px black, 
    1px 1px 1px black;
}

.sl__chat__layout > div {
  padding: 0.2em 0;
  word-break: break-all;
  animation: fadeOut 1s ease $message_hide_delay forwards;
  -webkit-animation: fadeOut 1s ease $message_hide_delay forwards;
}

/* makes messages go sideway */
.sl__chat__layout.horizontal_flow {
  right: 0;
  text-align: right;
  width: 2500%;
  height: 1.6em;
  overflow: hidden;
}
.sl__chat__layout.horizontal_flow > div {
  display: inline-block;
  margin-left: 1.0em;
  position: relative;
  /* left: 400px; */
  /* animation: slide 0.2s forwards; */

  /* forces each message container to be not taller than 1em */
  height: 1em;
  overflow: hidden;
}

.sl__chat__layout > div.deleted {
  visibility: hidden;
}

.sl__chat__layout .emote {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: relative;
  padding: 0 4px;
  /*top: -.2em;*/
}

.sl__chat__layout .emote img {
  display: inline-block;
  height: 0.8em;
  opacity: 0;
}

.badge,.colon,.name {
  display: inline-block;
  vertical-align: top;
}

.sl__chat__layout .meta {
  /* the closing tag of `.meta` being in a new line creates a whitespace. */
  /* unless it changes, padding-right won't be included. */
  padding-right: 0px;
  position: relative;
}

.badge {
  margin-right: 4px;
  height: 1.2em;
  position: relative;
}

.name {
  /* makes username thicker */
  /* font-weight: 700; */
}

/* cheermote */
.message > img[src*=".gif"] {
  height: 1.2em;
  padding-right: 4px;
}
.message > img[src*=".gif"] + font {
  position: relative;
  top: -0.25em;
}

chatbox.html

<!-- item will be appened to this layout -->
<div class="log_copy sl__chat__layout horizontal_flow text_outline">
</div>
<div class="log_copy sl__chat__layout horizontal_flow text_outline">
</div>
<div id="log" class="sl__chat__layout horizontal_flow text_outline">
</div>

<!-- chat item -->
<script type="text/template" id="chatlist_item">
  <div data-from="{from}" data-id="{messageId}">
    <span class="meta" style="color: {color}">
      <span class="badges"></span><span class="name">{from}</span>
    </span>

    <span class="message">
      {message}
    </span>
  </div>
</script>

chatbox.js

let logInstances = []
logInstances.push(document.getElementById('log'))
logInstances.push(...Array.from(document.getElementsByClassName('log_copy')))

// Please use event listeners to run functions.
document.addEventListener('onLoad', function (obj) {
  // obj will be empty for chat widget
  // this will fire only once when the widget loads
  for (let i = 0; i < logInstances.length; i++) {
    logInstances[i].dataset.row = i
    if (i === 0) { continue }
      
    logInstances[i].style.right = i * -100 + '%'
    logInstances[i].style.marginBottom = i * 1.6 + 'em'
  }
});

document.addEventListener('onEventReceived', function (obj) {
  // obj will contain information about the event
  for (let i = 0; i < logInstances.length; i++) {
    keepRecentMessages(logInstances[i])
  }
});

function keepRecentMessages (messageList, amountToKeep = 10) {
  if (
    typeof messageList === 'undefined' ||
    typeof amountToKeep !== 'number'
  ) {
    return false
  }
  while (messageList.children.length > amountToKeep) {
    messageList.removeChild(messageList.firstElementChild)
  }
  return true
}