When scrolling this list and reach the end of the loaded elements a new group of buffered elements will be added. This will continue until all the elements have been loaded
<p>When scrolling this list and reach the end of the loaded elements a new group of buffered elements will be added.
This will continue until all the elements have been loaded</p>
<ch5-list id="demo-list-1"
size="500"
orientation="horizontal"
indexId="idx"
minWidth="250px"
maxWidth="500px"
minHeight="100px"
maxHeight="150px"
itemWidth="125px"
itemHeight="75px"
scrollbar="true"
bufferAmount="20">
<template>
<div class="horizontal-list-item">
<span>item_{{idx}}</span>
</div>
</template>
</ch5-list>
.horizontal-list-item {
border: 1px solid transparent;
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
padding: 10px;
display: table;
width: 100%;
height: 100%;
}
.horizontal-list-item span {
display: table-cell;
vertical-align: middle;
text-align: center;
}
When scrolling this list and reach the end of the loaded elements a new group of buffered elements will be added. This will continue until all the elements have been loaded
<p>When scrolling this list and reach the end of the loaded elements a new group of buffered elements will be added.
This will continue until all the elements have been loaded</p>
<ch5-list id="demo-list-2"
size="500"
orientation="vertical"
indexId="idx"
minWidth="150px"
maxWidth="165px"
minHeight="100px"
maxHeight="250px"
itemWidth="150px"
itemHeight="75px"
scrollbar="true"
bufferAmount="20">
<template>
<div class="vertical-list-item">
<span>item_{{idx}}</span>
</div>
</template>
</ch5-list>
.vertical-list-item {
border: 1px solid transparent;
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
padding: 10px;
display: table;
width: 100%;
height: 100%;
}
.vertical-list-item span {
display: table-cell;
vertical-align: middle;
text-align: center;
}