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

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

반응형

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

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

(환경: vue.js 2 버전)

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

{{ item }}

- 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 영역 안에서 자동으로 무한 반복 스크롤링되도록 개발하는 법을 알아보았습니다.

반응형

from http://nm-it-diary.tistory.com/90 by ccl(A) rewrite - 2021-10-15 12:27:53