Home

<script>
 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) {
        var node;
        for (_x = 0; _x <= itemsMax - 1; _x++) {
          node = listOpts.items[_x];
          if (!cloned) {
            node = listOpts.items[_x].cloneNode(true);
          }
          scrollUl.appendChild(node);
        }

        initItems(cloned);
        cloned = true;
        itemsScrolled = 0;
      }
    }

    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;
      }
    }

    var scrollWx = document.getElementById("wrap-scrollx");
    var scrollUlx = document.getElementById("ul-scrollx");
    var itemsScrolledx,
      itemsMaxx,
      clonedx = false;

    var listOptsx = {
      itemCount: null,
      itemHeight: null,
      items: [],
    };

    function scrollWrapx() {
      itemsScrolledx = Math.ceil((this.scrollTop + listOptsx.itemHeight / 2) / listOptsx.itemHeight);

      if (this.scrollTop < 1) {
        itemsScrolledx = 0;
      }

      listOptsx.items.forEach(function (ele) {
        ele.classList.remove("activex");
      });

      if (itemsScrolledx < listOptsx.items.length) {
        listOptsx.items[itemsScrolledx].classList.add("activex");
      }

      if (itemsScrolledx > listOptsx.items.length - 3) {
        var nodex;
        for (_x = 0; _x <= itemsMaxx - 1; _x++) {
          nodex = listOptsx.items[_x];
          if (!clonedx) {
            nodex = listOptsx.items[_x].cloneNode(true);
          }
          scrollUlx.appendChild(nodex);
        }

        initItemsx(cloned);
        clonedx = true;
        itemsScrolledx = 0;
      }
    }

    function initItemsx(scrollSmooth) {
      listOptsx.items = [].slice.call(scrollUlx.querySelectorAll("li"));
      listOptsx.itemHeight = listOptsx.items[0].clientHeight;
      listOptsx.itemCount = listOptsx.items.length;

      if (!itemsMaxx) {
        itemsMaxx = listOptsx.itemCount;
      }

      if (scrollSmooth) {
        var seamLessScrollPointx = (itemsMaxx - 3) * listOptsx.itemHeight;
        scrollWx.scrollTop = seamLessScrollPointx;
      }
    }

    document.addEventListener("DOMContentLoaded", function (event) {
      initItems();
      scrollW.onscroll = scrollWrap;
      initItemsx();
      scrollWx.onscroll = scrollWrapx;
    });
 
</script>