JavaScript — Créer et gérer un ascenceur personnalisé (scrollbar)

Notez que les portions de code ci-dessous ne sont pas des exemples complets, mais uniquement des indications sur les propriétés et variables à utiliser pour avoir ces ascenseurs personnalisés. Vous devrez par conséquent les adapter en fonction de votre code.

Le code HTML :

<!-- HTML -->
<div class="scrollbar-track">
    <div class="scrollbar-cursor"></div>
</div>

Le code JavaScript :

/* JAVASCRIPT */

/* PROPERTIES */
nbItems; /* Number of items in the list */
currentItemIndex; /* Current item index between 0 and nbItems - 1 */
nbVisibleItems; /* Number of visible items in the list */
gridHeight; /* The height of the grid containing visible items */

/* HEIGHT */
var scrollbarPercentHeight = nbVisibleItems / nbItems;
var scrollbarHeight = scrollbarPercentHeight * gridHeight;

/* TOP */
var scrollbarMaxTopPercent = (100 - scrollbarHeight) / 100;// 1 - scrollbarPercentHeight;
var scrollbarTop = (currentItemIndex * 100 / (nbItems - 1)) * scrollbarMaxTopPercent;

scrollbarCursor.style.height = scrollbarHeight + "%";
scrollbarCursor.style.top = scrollbarTop + "%";