<div class="scroll-view-wrap">
    <div class="scroll-view" data-scroll-view>View-Up</div>
    <div class="scroll-view" data-scroll-view>View-Up</div>
    <div class="scroll-view" data-scroll-view>View-Up</div>
    <div class="scroll-view" data-scroll-view>View-Up</div>
    <div class="scroll-view" data-scroll-view="view-right">View-Right</div>
    <div class="scroll-view" data-scroll-view="view-right">View-Right</div>
    <div class="scroll-view" data-scroll-view="view-left">View-Left</div>
    <div class="scroll-view" data-scroll-view="view-left">View-Left</div>
    <div class="scroll-view" data-scroll-view="view-down">View-Down</div>
    <div class="scroll-view" data-scroll-view="view-down">View-Down</div>
    <div class="scroll-view" data-scroll-view>View-Up</div>
    <div class="scroll-view" data-scroll-view>View-Up</div>
    <div class="scroll-view" data-scroll-view>View-Up</div>
    <div id="scroll-view" class="scroll-view" data-scroll-view>View-Up</div>
</div>

hide 기능이 없음.

시점에 따른 이벤트

document.querySelectorAll('[data-scroll-view]').forEach(function (el) {
    el.addEventListener('scrollView.shown', function (e) {
        /* e.target: [data-scroll-view] */
        console.log(e.target, 'shown');
    })
    el.addEventListener('scrollView.hidden', function (e) {
        console.log(e.target, 'hidden');
    })
})

Component 호출(feat. 비동기)

const scEl = document.querySelector('#scroll-view');
const sc = new SKY.ScrollView(scEl);

// data-scroll-view가 많을 경우
const scrollView = new SKY.UIInitializer('[data-scroll-view]', SKY.ScrollView)