[JAVASCRIPT] div 스크롤 자동으로 무한 반복하는 법

화면 전체가 아닌 화면의 일부분,

저는 Table을 자동으로 무한 반복 스크롤링되도록 만들었습니다.

(환경: vue.js 2 버전)

 

---

 

1. 스크롤될 영역의 HTML 코드

<div class="scroll-area">
  <table class="tbl-list">
    <tbody>
      <tr v-for="(items, i) in table_data" :key="i">
        <td v-for="(item, j) in items" :key="j">
          {{ item }}
        </td>
      </tr>
    </tbody>
  </table>
</div>

- div로 스크롤될 부분을 감싸주고, class를 scroll-area로 주었습니다.

- 그 안에 표를 스크롤하기 위해 class가 tbl-list인 table 태그와 tbody를 넣어 테이블을 구성했습니다.

 

 

2. javascript 코드 (method)

scrollTable() {

  const wrapper = document.querySelector(".scroll-area");

  setInterval(() => {
      wrapper.scrollTop = wrapper.scrollTop + 100;

    if (wrapper.offsetHeight + wrapper.scrollTop >= wrapper.scrollHeight) {
      wrapper.scrollTop = 0;
    }
  }, 2000);
  
}

- 저는 vue 환경에서 만들었기 때문에 scrollTable() 메서드를 method 영역에 만들었습니다.

- 먼저 scroll-area 부분을 wrapper로 받았어요.

- 그리고 setInterval()을 이용해 2초에 한 번씩 자동으로 스크롤되도록 했습니다.

- 마지막으로 가장 중요한 부분인데, 스크롤이 끝난 후 다시 맨 위로 올리려면 위 코드의 if문 구문이 꼭 필요합니다.

- wrapper.offsetHeight + wrapper.scrollTop 값이 wrapper.scrollHeight보다 크거나 같은 경우 wrapper.scrollTop을 0으로 줘서 영역의 맨 위로 올라가도록 합니다.

 

 

3. css 코드

.scroll-area {
  width: 100%;
  max-height: 23vh;
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  scroll-behavior: smooth;
}

.scroll-area::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
}

tbody td {
  font-size: 1.5vmin;
  height: 2.5vh;
}

- overflow-y에 scroll을 줘서 세로로 스크롤이 되게 했습니다.

- 스크롤 바가 보이지 않았으면 해서 -ms-overflow-style, scrollbar-width, display를 none으로 설정했습니다.

- 스크롤을 부드럽게 하기 위해서는 scroll-behavior를 smooth로 주면 됩니다.

 

 

 

이상으로 div 영역 안에서 자동으로 무한 반복 스크롤링되도록 개발하는 법을 알아보았습니다.

 

---