Infinite List Scrolling Effect In JavaScript and CSS

Preview:

Description:

An endless rolling list concept built with JavaScript and CSS/CSS3 that enables you to scroll infinitely and vertically through a regular html list with mouse wheel and touch gestures.

How to use it:

The required html structure for the scrolling list.

<div id="scroll-container">
  <div class="wrap-container" id="wrap-scroll">
    <ul id="ul-scroll">
      <li class="active"> <span class="item"> Item one </span> </li>
      <li> <span class="item"> Item two </span> </li>
      <li> <span class="item"> Item three </span> </li>
      <li> <span class="item"> Item four </span> </li>
      <li> <span class="item"> Item five </span> </li>
      <li> <span class="item"> Item six </span> </li>
      <li> <span class="item"> Item seven </span> </li>
      <li> <span class="item"> Item eight </span> </li>
      <li> <span class="item"> Item nine </span> </li>
      <li> <span class="item"> Item ten </span> </li>
      <li> <span class="item"> Item eleven </span> </li>
    </ul>
  </div>
</div>

Create a SVG based mask for the scrolling list.

<svg>
<defs>
  <linearGradient id="gradient" x1="0" y1="0%" x2 ="0" y2="50%">
    <stop stop-color="black" offset="0"/>
    <stop stop-color="white" offset="1"/>
  </linearGradient>
  <mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
    <rect y="0" width="1" height="1" fill="url(#gradient)" />
  </mask>
</defs>
</svg>

The basic CSS/CSS3 styles.

#scroll-container {
  overflow: hidden;
  max-width: 100%;
  margin: auto;
  height: 50vh;
  top: 25vh;
  position: relative;
  min-height: 200px;
}
.wrap-container {
  position: relative;
  max-height: 200px;
  width: 100%;
  max-width: 100%;
  margin: auto;
  /* background: #eee; */
  overflow: auto;
  padding-right: 20px;
  mask: url(#masking);
  -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, black), color-stop(1, transparent));
}
.wrap-container ul {
  list-style: none;
  position: relative;
  transition: transform .3s;
  top: 50px;
}
.wrap-container ul, .wrap-container ul li {
  margin: 0;
  padding: 0;
  text-align: center;
}
.wrap-container ul li {
  height: 50px;
  line-height: 50px;
  transition: transform .3s;
  overflow: hidden;
}
.wrap-container ul li:last-of-type { padding-bottom: 50px; }
.wrap-container ul li.active .item { transform: scale(1.9); }
.wrap-container ul li .item {
  position: relative;
  transition: transform 200ms;
  display: inline-block;
}

The core JavaScript to active the scrolling list.

var scrollW = document.getElementById('wrap-scroll');
var scrollUl = document.getElementById('ul-scroll');
var itemsScrolled, itemsMax, cloned = false;
var listOpts = {
    itemCount: null,
    itemHeight: null,
    items: []
};
function scrollWrap() {
    itemsScrolled = Math.ceil((this.scrollTop + listOpts.itemHeight / 2) / listOpts.itemHeight);
    if (this.scrollTop < 1) {
        itemsScrolled = 0;
    }
    listOpts.items.forEach(function (ele) {
        ele.classList.remove('active');
    });
    if (itemsScrolled < listOpts.items.length) {
        listOpts.items[itemsScrolled].classList.add('active');
    }
    if (itemsScrolled > listOpts.items.length - 3) {
        for (_x = 0; _x <= itemsMax - 1; _x++) {
            if (window.CP.shouldStopExecution(1)) {
                break;
            }
            var node = listOpts.items[_x];
            if (!cloned) {
                node = listOpts.items[_x].cloneNode(true);
            }
            scrollUl.appendChild(node);
        }
        initItems(cloned);
        cloned = true;
        itemsScrolled = 0;
        window.CP.exitedLoop(1);
    }
}
function initItems(scrollSmooth) {
    listOpts.items = [].slice.call(scrollUl.querySelectorAll('li'));
    listOpts.itemHeight = listOpts.items[0].clientHeight;
    listOpts.itemCount = listOpts.items.length;
    if (!itemsMax) {
        itemsMax = listOpts.itemCount;
    }
    if (scrollSmooth) {
        var seamLessScrollPoint = (itemsMax - 3) * listOpts.itemHeight;
        scrollW.scrollTop = seamLessScrollPoint;
    }
}
document.addEventListener('DOMContentLoaded', function (event) {
    initItems();
    scrollW.onscroll = scrollWrap;
});