Scroll loop cloned clones

In this example below you will see how to do a Scroll loop cloned clones with some HTML / CSS and Javascript

Infinite scroll loop which positions you to the top or bottom of the container when the opposite end is reached.

Thumbnail
This awesome code was written by vincentorback, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright vincentorback ©
  • HTML
  • CSS
  • JavaScript
    <main class="Loop js-loopContainer">
  <section class="js-loopItem green">
    <h1>One</h1>
  </section>
  <section class="js-loopItem red">
    <h1>For</h1>
  </section>
  <section class="js-loopItem blue">
    <h1>All</h1>
  </section>
  <section class="js-loopItem orange">
    <h1>And</h1>
  </section>
  <section class="js-loopItem blue">
    <h1>All</h1>
  </section>
  <section class="js-loopItem red">
    <h1>For</h1>
  </section>
</main>

/*Downloaded from https://www.codeseek.co/vincentorback/scroll-loop-cloned-clones-OpdNJa */
    html,
body {
  height: 100%;
  overflow: hidden;
}

.Loop {
  position: relative;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

section {
  position: relative;
  text-align: center;
  min-height: 300px;
  max-height: 700px;
  height: 80%;
}

::scrollbar {
  display: none;
}







body {
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-weight: normal;
  font-size: 100%;
}

.red {
  background: #FF4136;
}
.green {
  background: #2ECC40;
}
.blue {
  background: #0074D9;
}
.orange {
  background: rebeccapurple;
}

h1 {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  font-size: 80px;
  letter-spacing: 5px;
  color: #fff;
  text-transform: uppercase;
}


/*Downloaded from https://www.codeseek.co/vincentorback/scroll-loop-cloned-clones-OpdNJa */
    var doc = window.document,
  context = doc.querySelector('.js-loopContainer'),
  items = doc.querySelectorAll('.js-loopItem'),
  clones = [],
  disableScroll = false,
  scrollHeight = 0,
  scrollPos = 0,
  clonesHeight = 0

function getScrollPos () {
  return (context.pageYOffset || context.scrollTop) - (context.clientTop || 0)
}

function setScrollPos (pos) {
  context.scrollTop = pos
}

function getClonesHeight () {
  clonesHeight = 0

  Array.from(clones, clone => {
    clonesHeight = clonesHeight + clone.offsetHeight
  })

  return clonesHeight
}

function reCalc () {
  scrollPos = getScrollPos()
  scrollHeight = context.scrollHeight
  clonesHeight = getClonesHeight()

  if (scrollPos <= 0) {
    setScrollPos(1) // Scroll 1 pixel to allow upwards scrolling
  }
}

function scrollUpdate () {
  if (!disableScroll) {
    scrollPos = getScrollPos()

    if (clonesHeight + scrollPos >= scrollHeight) {
      // Scroll to the top when you’ve reached the bottom
      setScrollPos(1) // Scroll down 1 pixel to allow upwards scrolling
      disableScroll = true
    } else if (scrollPos <= 0) {
      // Scroll to the bottom when you reach the top
      setScrollPos(scrollHeight - clonesHeight)
      disableScroll = true
    }
  }

  if (disableScroll) {
    // Disable scroll-jumping for a short time to avoid flickering
    window.setTimeout(function () {
      disableScroll = false
    }, 40)
  }
}

function onLoad () {
  Array.from(items, item => {
    const clone = item.cloneNode(true)
    context.appendChild(clone)
    clone.classList.add('js-clone')
  })

  clones = context.querySelectorAll('.js-clone')

  reCalc()

  context.addEventListener('scroll', function () {
    window.requestAnimationFrame(scrollUpdate)
  }, false)

  window.addEventListener('resize', function () {
    window.requestAnimationFrame(reCalc)
  }, false)
}

window.onload = onLoad


Comments