위아래로 레이어 스크롤 컨트롤

js

var motionIntervalId;
var stopTime = 6000;
var speed = 20;
var dropHit = document.getElementsByClassName('drop-hit');
var eleHeight = parseInt(dropHit[0].style.height); // Element 높이
var eleCount = dropHit.length;
var elements = [];
function DirectDown() { // 아래로 내려가기

  clearInterval(motionIntervalId);

  // 마지막 인자값을 앞쪽으로 넣어준다.
  var last = elements.pop();
  elements.unshift(last);

  var elTop = - eleHeight;
  for(var i = 0; i < elements.length; i++) {
    elements[i].style.top = elTop + 'px';  
    elTop += eleHeight;
  }

  motionIntervalId = setInterval("DownLayer()", speed);
}

function DownLayer()
{
  if(parseInt(elements[1].style.top)  < eleHeight) { // 현재 Element가 내려오는 중이면
    for(j = 0 ; j < eleCount; j++) {
      var increase = parseInt(elements[j].style.top) + 1;
      elements[j].style.top = increase + 'px';
    }
  } else {
    clearInterval(motionIntervalId);
    setTimeout("DirectDown()", stopTime);
  }
}

function DirectUp()
{
  clearInterval(motionIntervalId);

  // 처음 인자값을 맨뒤쪽으로 넣어준다.
  var elTop = 0;
  for(var i = 0; i < elements.length; i++) {
    elements[i].style.top = elTop + 'px';  
    elTop += eleHeight;
  }

  motionIntervalId = setInterval("UpLayer()", speed);
 
}

function UpLayer() {
  if(parseInt(elements[0].style.top)  > -eleHeight) { 
    for(var j = 0 ; j < elements.length; j++) {
      var decrease = parseInt(elements[j].style.top) - 1;
      elements[j].style.top = decrease + 'px';
    }
  } else {
    clearInterval(motionIntervalId);
    var first = elements.shift();
    elements.push(first);
    setTimeout("DirectUp()", stopTime);
  }
}


function init() {
  for(var i = 0; i < eleCount; i++) {
      elements.push(dropHit[i]);
    }
}
init();
// DirectDown();
DirectUp();

css

.outer {
position:relative;
  width:340px;
  height:182px;
  left:0px;
  top:0px;
  overflow:hidden;
}
.drop-hit {
  background-color: white;
  position:absolute;
  left:0px;
  visibility:visible;
  width:340px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.drop-hit > div {
  display: table;
}

html

<div class="outer">

    <div class="drop-hit" style="top:0px; height:182px;">
      <div>
        제품이미지 설명 가격 1-1
      </div>
      <div>
        제품이미지 설명 가격 1-2
      </div>
      <div>
        제품이미지 설명 가격 1-3
      </div>
    </div>

    <div class="drop-hit" style="top:-182px; height:182px;">
        <div>
        제품이미지 설명 가격 2-1
      </div>
      <div>
        제품이미지 설명 가격 2-2
      </div>
      <div>
        제품이미지 설명 가격 2-3
      </div>
    </div>

    <div class="drop-hit" style="top:-364px; height:182px;">
        <div>
        제품이미지 설명 가격 3-1
      </div>
      <div>
        제품이미지 설명 가격 3-2
      </div>
      <div>
        제품이미지 설명 가격 3-3
      </div>
    </div>

    <div class="drop-hit" style="top:-546px; height:182px;">
        <div>
        제품이미지 설명 가격 4-1
      </div>
      <div>
        제품이미지 설명 가격 4-2
      </div>
      <div>
        제품이미지 설명 가격 4-3
      </div>
    </div>

</div>


<div>
    <a href="javascript:DirectUp()"> UP </a> | 
    <a href="javascript:DirectDown()"> Down </a>
</div>

See the Pen 위아래로 스크롤 컨트롤 by younghyeong ryu (@wangta69) on CodePen.