List on a scroll container

List of number example

If you have a large list of elements with a scroll, you can easily navigate through the list. First, we’re going to create a large list of numbers:

<script setup lang="ts">
    const list = $state([...Array(20).keys()]);
    const [ parent ] = useDragAndDrop(list);
</script>

Using useDragAndDrop

We’re going to make parent element scrollable:

<ul ref="parent" class="number-list">
  {#each list as element, index }
    <li class="number" data-index = {index}>
        { element }
    </li>
  {/each }
</ul>
<style>
// ....
.number-list {
    display: block;
    padding-inline: 10px;
    overflow: auto;
    height: 300px;
}
</style>

Preview

This is what you got as a result:

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19