Scroller estilo Android con sección indexación

Vista prévia

Descripción

Se trata de un desplazador vertical dinámico con función de indexación de secciones, escrito en JavaScript y CSS. Ideal para la lista de contactos.

De forma similar a la & de Android material de diseño RecyclerView que muestra una burbuja alfabetos después de la barra de desplazamiento.

Funcionamiento

Cree el HTML para el desplazador.

<div id="container" class="hideText">

<div id="scroll-display">

</div>

<ul id="list">


</ul>
</div>

Prepare sus datos para presentarlos en el desplazador.

var aNames = [


{



name: "Kamal"


},


{



name: "Perry"


},


{



name: "Ishmael"


},


// ...
]

El principal JavaScript para activar el scroller.

// Sorting names
aNames = aNames.sort(function(oName1, oName2) {

return oName1.name > oName2.name ? 1 : -1;
});

// Make rows
var oList = document.querySelector("#list");
for (var iIndex = 0; iIndex < 100; iIndex++) {

var oItem = document.createElement("li");

oItem.innerText = aNames[iIndex].name;

oList.appendChild(oItem);
}

var iItemHeight = 40;
// Caching children
var aChildren = oList.querySelectorAll("li");
var oDisplay = document.querySelector("#scroll-display");
var oContainer = document.querySelector("#container");

var hideFn = null;

 oList.addEventListener("scroll", function() {

oContainer.classList.remove("hideText");

var iScrollTop = oList.scrollTop;

var iScrollHeight = oList.scrollHeight;

var iHeight = oList.clientHeight;

var currentItem = Math.floor(iScrollTop / iItemHeight);

oDisplay.setAttribute("data-value", aChildren[currentItem].innerText.charAt(0));

oDisplay.style.transform = `translateY(${( (iScrollTop * iHeight) / iScrollHeight)}px)`;



// Debounce hiding

 if(hideFn){


clearTimeout(hideFn);


}

hideFn = setTimeout(function() {


oContainer.classList.add("hideText");

}, 200);
});

El ejemplo CSS.

#list {

height: 300px;

display: flex;

flex-direction: column;

list-style: none;

padding-left: 0px;

margin: 0px;

overflow-y: auto;
}

#list li {

background: white;

padding: 10px 20px;

margin: 2px;
}

#scroll-display {

position: relative;

will-change: transform;
}

#scroll-display:after {

border-radius: 30px;

width: 15px;

text-align: center;

height: 15px;

content: attr(data-value);

position: absolute;

top: 0;

right: 20px;

background: rgba(0, 0, 0, 0.7);

color: white;

padding: 10px;

font-family: Courier;
}

#container.hideText #scroll-display { display: none; }