问在vanilla/纯JS中无限滚动，不产生间隙

EN

const scrollAnimation  = (function(){
      let element = null;
      // let obejct = {};
      let scroller = true;
      let scrollSpeed = 0;
      let  parentElement= null;
      let childElement = null;
      let viewHeight = 0;

      const toggleScrollEvent = function (e){
            scroller = (e.type == 'mouseenter') ? false : true;
        }
     

     const  setProperty =  function(element,obejct){

          viewHeight  = document.querySelector(element).clientHeight
       
            scrollSpeed = obejct.scrollSpeed;

            // create child element 
            childElement =  document.createElement('div');
            childElement.id = 'childElement';

           // append scroll content to  child element 
            let items = document.querySelectorAll(element+ ' .item');
            items.forEach(function(item){
              childElement.appendChild(item)
            });

            // append child element to parent element
            element = document.querySelector(element);
            parentElement = element.appendChild(childElement)

            // set child element top property value manually 200px
            // let hg = childElement.getBoundingClientRect();
            childElement.style.top = viewHeight+ 'px';


            
            parentElement.addEventListener('mouseenter',toggleScrollEvent);
            parentElement.addEventListener('mouseleave',toggleScrollEvent);

      } 


    const scrollEelement = function(){
      let posY = parseInt(childElement.style.top);
      // Get the first child div
      let firstDiv = childElement.querySelectorAll(".item")[0];
      // Check its height
      let firstDivHeight = firstDiv.clientHeight;
      // If we are scrolling...
      if(scroller){
        // Find out where the scroll would move to
        let tmppos = posY - scrollSpeed;
        // If it is higher than the height of the first div
        if (tmppos < 0 - firstDivHeight) {
          // remove the first div
          childElement.removeChild(firstDiv);
          // .. and append it to the end
          childElement.appendChild(firstDiv);
          // .. and do the scroll
          childElement.style.top = (tmppos + firstDivHeight) + "px";
        } else {
          // otherwise, just do the scroll
          childElement.style.top = tmppos + "px";
        }
      }
    }

   setInterval(scrollEelement,10)

    return {
      init:function(element,obejct){
       setProperty(element,obejct)
      }
    }

  })([]);

  window.addEventListener("DOMContentLoaded",function(){
    scrollAnimation.init('#parentElement',{
      scrollSpeed:1,
    });
  })

 *,*::after,*::before{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      body,html{
        margin: 0;
        padding: 0;
      }
    
      #parentElement{
        position: relative;
        width: 400px;
        background: #eeeeee;
        height: 200px;
        overflow: hidden;
        border: 2px solid royalblue;
      }
        #parentElement #childElement{
            padding: 10px;
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
      }

<div id="parentElement">
      <h1 class="item">Start</h1>
      <h1 class="item">Mid................<br>..............on two lines</h1>
      <h1 class="item">Mid</h1>
      <h1 class="item">Mid</h1>
      <h1 class="item">Mid</h1>
      <h1 class="item">Mid</h1>
      <h1 class="item">Mid</h1>
      <h1 class="item" style="background: orangered;">End</h1>
  </div>

const containerElem = document.querySelector('.container');
const contentElem = document.querySelector('.content');
const contentCloneElem = contentElem.cloneNode(true);
containerElem.appendChild(contentCloneElem);

const pxPerSec = 100;
const contentHeight = contentElem.clientHeight;
containerElem.style.animationDuration = `${contentHeight / pxPerSec}s`;

.infiniteScroll {
  border: 2px solid blue;
  height: 150px;
  overflow: hidden;
}

.container {
  border: 2px solid red;
}

.content {
  border: 1px solid green;
}

@keyframes changePos {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-50%);
  }
}

.container {
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-name: changePos;
  animation-iteration-count: infinite;
  animation-direction: normal;
}

.container:hover {
  animation-play-state: paused;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Infinite Scroll</title>
</head>
<body>
  <div class="infiniteScroll">
    <div class="container">
      <div class="content">
        <h1 class="item">Start</h1>
        <h1 class="item">Mid</h1>
        <h1 class="item">Mid</h1>
        <h1 class="item">Mid</h1>
        <h1 class="item">Mid</h1>
        <h1 class="item">Mid</h1>
        <h1 class="item">Mid</h1>
        <h1 class="item" style="background: orangered;">End</h1>
      </div>
    </div>
  </div>
</body>
</html>