<div class="scroll-area on">
  <h2 class="title">overflow-anchor: auto</h2>
  <ul class="infinite-scroll-list">
    <li class="theme_card">
      <div class="theme_color"></div>
      <div class="theme_info">
        <span class="theme_name">Pale Dogwood</span>
        <span class="theme_code">#FCDF8A - #F38381</span>
      </div>
    </li>
    <li class="theme_card">
      <div class="theme_color" style="background-image: linear-gradient(128deg, #f2d50f, #eb6e91);"></div>
      <div class="theme_info">
        <span class="theme_name">Flame</span>
        <span class="theme_code">#F2D50F - #DA0641</span>
      </div>
    </li>
    <li class="theme_card">
      <div class="theme_color" style="background-image: linear-gradient(128deg, #ce9ffc, #7367f0);"></div>
      <div class="theme_info">
        <span class="theme_name">Ultra Violet</span>
        <span class="theme_code">#7367F0 - #CE9FFC</span>
      </div>
    </li>
    <li class="theme_card">
      <div class="theme_color" style="background-image: linear-gradient(128deg, #13f1fc, #0470dc);"></div>
      <div class="theme_info">
        <span class="theme_name">Island Paradise</span>
        <span class="theme_code">#13F1FC - #0470DC</span>
      </div>
    </li>
    <li class="theme_card">
      <div class="theme_color" style="background-image: linear-gradient(128deg, #c3ec52, #0ba29d);"></div>
      <div class="theme_info">
        <span class="theme_name">Greenery</span>
        <span class="theme_code">#C3EC52 - #0BA29D</span>
      </div>
    </li>
  </ul>
</div>
<div class="scroll-area off">
  <h2 class="title">overflow-anchor: none</h2>
  <ul class="infinite-scroll-list">
    <li class="theme_card">
      <div class="theme_color"></div>
      <div class="theme_info">
        <span class="theme_name">Pale Dogwood</span>
        <span class="theme_code">#FCDF8A - #F38381</span>
      </div>
    </li>
    <li class="theme_card">
      <div class="theme_color" style="background-image: linear-gradient(128deg, #f2d50f, #eb6e91);"></div>
      <div class="theme_info">
        <span class="theme_name">Flame</span>
        <span class="theme_code">#F2D50F - #DA0641</span>
      </div>
    </li>
    <li class="theme_card">
      <div class="theme_color" style="background-image: linear-gradient(128deg, #ce9ffc, #7367f0);"></div>
      <div class="theme_info">
        <span class="theme_name">Ultra Violet</span>
        <span class="theme_code">#7367F0 - #CE9FFC</span>
      </div>
    </li>
    <li class="theme_card">
      <div class="theme_color" style="background-image: linear-gradient(128deg, #13f1fc, #0470dc);"></div>
      <div class="theme_info">
        <span class="theme_name">Island Paradise</span>
        <span class="theme_code">#13F1FC - #0470DC</span>
      </div>
    </li>
    <li class="theme_card">
      <div class="theme_color" style="background-image: linear-gradient(128deg, #c3ec52, #0ba29d);"></div>
      <div class="theme_info">
        <span class="theme_name">Greenery</span>
        <span class="theme_code">#C3EC52 - #0BA29D</span>
      </div>
    </li>
  </ul>
</div>

body,
html
h1,
h2,
p,
strong,
ul {
    margin: 0;
    padding: 0;
    font-weight: 400;
}

ul {
    list-style-type: none;
}

a{
    color: #000;
    text-decoration: none;
}

.scroll-area {
    margin: 0 10px;
    width: calc(50vw - 30px);
    height: 500px;
    display: inline-block;
    font-size: 0;
    overflow: scroll;
}

.on {
  overflow-anchor: auto;
}

.off {
  overflow-anchor: none;
}

.add-item {
  background-color: black;
  height: 200px;
}

.title {
    margin: 20px 0;
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    line-height: 28px;
}

.infinite-scroll-list {
    font-size: 0;
    margin-top: 12px;
}

.theme_card {
    display: block;
    margin-top: 40px;
    width: 100%;
    box-shadow: 0 2px 5px 0 rgba(160, 160, 160, 0.5);
    border-radius: 6px;
    overflow: hidden;
}


.theme_color {
    height: 150px;
    background-image: linear-gradient(128deg, #fcdf8a, #f38381);
}

.theme_info {
    height: 61px;
    padding: 9px 10px 0;
}

.theme_name {
    display: block;
    font-size: 18px;
    font-weight: 500;
    line-height: 19px;
}

.theme_code {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 14px;
    color: #646464;
}

let scrollArea = document.querySelectorAll('.scroll-area');

scrollArea.forEach((val, index) => {
  val.addEventListener('scroll', addItems, false)
});

function addItems(e) {
  const listElement = e.target.querySelector('.infinite-scroll-list');
  let addItem = document.createElement('div');
addItem.classList.add('add-item');
  setTimeout(function() {
    e.target.insertBefore(addItem, listElement);
    e.target.removeEventListener('scroll', addItems, false);
  }, 500);
}