ScrollList Demo

by Jason Miller

HTML

<script src="https://cdn.rawgit.com/synacorinc/frameworkless/1.0.3/dist/util.js"></script>
<script src="https://cdn.rawgit.com/synacorinc/frameworkless/1.0.3/dist/events.js"></script>
<script src="https://cdn.rawgit.com/developit/scroll-list/master/scroll-list.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />

<div class="row header">
    <span>A</span>
    <span>B</span>
    <span>C</span>
</div>

<template id="row-template">
    <div class="row">
        <span tpl="a"></span>
        <span tpl="b"></span>
        <span tpl="c"></span>
    </div>
</template>

SCSS

html,body {
    margin: 0;
    height: 100%;
    background: #EEE;
    font: 12px/1.2 'Helvetica Neue',helvetica;
    color: #555;
    overflow: hidden;
}

.scroll-list {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    bottom: 0;
    border: none;
    background: #FFF;
    text-rendering: optimizeSpeed;
    overflow: auto;
}

.scroll-list .height {
    z-index: 25;
}

.scroll-list .inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: none;
    z-index: 50;
    overflow: visible;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transform: translate3d(0,0,0);
    transition-duration: 0ms;
    -webkit-user-select: none;
    user-select: none;
    text-size-adjust: none;
}

.row {
    display: flex;
    height: 20px;
    background: #FFF;
    border: none;
    border-bottom: 1px solid #F3F3F3;
    overflow: hidden;
}
.row.header {
    background: #DDD;
    color: #000;
}
.row.selected {
    background: #888;
    color: #FFF;
}
.row > span {
    display: inline-block;
    flex: 1;
    padding: 3px;
    overflow: hidden;
    white-space: nowrap;
}

Babel + JSX

let $ = ::document.querySelector,
	template = $('#row-template').content.firstElementChild;

// just provide a DOM node as a template for each row
let list = new ScrollList({
    template,
    useTransforms: true,
    bufferedScrolling: true,
    rowHeight: () => 21		// static row height for speed
});

// insert the list into an element:
list.insertInto(document.body);

// generate 1,000,000 rows:
let mil = [];
for (let i=1e6; i--; ) {
    mil[i] = {a:i+'a', b:i+'b', c:i+'c'};
}

// set rows as the table's data:
list.setData(mil);


// later on, select a row:
list.data[5].selected = true;
list.update();	// re-render everything