Skip to content

getting started

강지웅/FE개발랩/NE edited this page Nov 1, 2016 · 2 revisions

Getting started

Installation

Bower

Download bower command to virtual scroll and dependent libraries.

$ bower i tui-component-virtual-scroll

Include js manually.

<script src="bower_components/tui-code-snippet/code-snippet.min.js"></script>
<script src="bower_components/tui-component-virtual-scroll/dist/component-virtual-scroll.min.js"></script>

Manual Download

Download tui-component-virtual-scroll, tui-code-snippet manually and include sources in page.

<script src="code-snippet.min.js"></script>
<script src="component-virtual-scroll.min.js"></script>

Create Virtual Scroll Component.

<!-- ... -->
<body>
<!-- ... -->
<div id="virtual-scroll-container"></div>
<!-- ... include js ... -->
<script>
var virutalScroll = new tui.component.VirtualScroll('virtual-scroll-container', {
    scrollPosition: 100,
    itemHeight: 150, // default item height (default value : 50)
    layoutHeight: 500,
    spareItemCount: 4, // count of spare items for display items (default value: 5)
    threshold: 400, // pixel height from edge(start, end) of content for determining need emit scrollTop, scrollBottom event
    items: [
        {height: 100, contents: '<div>Item A</div>'},
        {height: 120, contents: '<div>Item B</div>'},
        {height: 110, contents: '<div>Item C</div>'},
    ]]
});
</script>
</body>
<!-- ... -->

Clone this wiki locally