Alphabet Jump Index — Drag-to-Scrub A–Z Contacts-Style List Navigation

<div class="demo">
  <div class="phone-frame">
    <div class="contacts-screen">
      <div class="contacts-header">Contacts</div>
      <div class="contacts-scroll" id="contactsScroll"></div>
      <div class="az-index" id="azIndex"></div>
      <div class="az-bubble" id="azBubble" hidden></div>
    </div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.demo { display: flex; }

.phone-frame { width: 300px; height: 520px; border-radius: 32px; border: 8px solid #0f172a; background: #0f172a; overflow: hidden; box-shadow: 0 30px 60px rgba(15,23,42,0.25); }
.contacts-screen { height: 100%; background: #fff; position: relative; display: flex; flex-direction: column; }
.contacts-header { padding: 14px 16px; font-size: 14px; font-weight: 800; color: #111827; border-bottom: 1px solid #f1f5f9; flex-shrink: 0; }

.contacts-scroll { flex: 1; overflow-y: auto; padding-right: 26px; scroll-behavior: smooth; }
.az-group-label { position: sticky; top: 0; background: #f8fafc; font-size: 11px; font-weight: 800; color: #6366f1; padding: 4px 16px; z-index: 2; }
.az-contact { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid #f8fafc; }
.az-avatar { width: 30px; height: 30px; border-radius: 50%; background: #eef2ff; color: #4338ca; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.az-name { font-size: 12.5px; font-weight: 600; color: #334155; }

.az-index { position: absolute; right: 2px; top: 44px; bottom: 8px; width: 20px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 4px 0; touch-action: none; user-select: none; }
.az-index-letter { font-size: 9px; font-weight: 800; color: #94a3b8; line-height: 1; cursor: pointer; }
.az-index-letter.active { color: #6366f1; }

.az-bubble { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(15,23,42,0.85); color: #fff; font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; pointer-events: none; }

const NAMES = [
  'Aaliyah Cruz','Adam Blake','Amir Nasser','Bianca Wolfe','Bruno Silva',
  'Carla Mendes','Chen Wei','Dana Whitfield','Diego Reyes','Ella Novak',
  'Farid Karimi','Grace Kim','Hana Suzuki','Ivan Petrov','Jasmine Cole',
  'Jules Park','Kofi Boateng','Layla Haddad','Liam O\'Connor','Mia Chen',
  'Nadia Popescu','Noah Fischer','Omar Farouk','Priya Nair','Quinn Baxter',
  'Ravi Singh','Sam Okoye','Tara Lindqvist','Uma Iyer','Victor Alves',
  'Wren Sokolov','Xavier Duval','Yara Haidari','Zane Whitfield',
];

const contactsScroll = document.getElementById('contactsScroll');
const azIndex = document.getElementById('azIndex');
const azBubble = document.getElementById('azBubble');

// Group contacts by first letter once, up front — this is the data structure
// both the scrollable list AND the A-Z index bar are built from, so the two
// can never disagree about which letters actually have contacts.
const groups = {};
NAMES.slice().sort((a, b) => a.localeCompare(b)).forEach((name) => {
  const letter = name[0].toUpperCase();
  (groups[letter] = groups[letter] || []).push(name);
});
const availableLetters = Object.keys(groups);
const ALL_LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

function initials(name) {
  return name.split(' ').map((p) => p[0]).slice(0, 2).join('').toUpperCase();
}

// Build the scrollable contact list, with a sticky group-label header per letter.
contactsScroll.innerHTML = availableLetters.map((letter) => `
  <div class="az-group" id="group-${letter}">
    <div class="az-group-label">${letter}</div>
    ${groups[letter].map((name) => `
      <div class="az-contact">
        <span class="az-avatar">${initials(name)}</span>
        <span class="az-name">${name}</span>
      </div>
    `).join('')}
  </div>
`).join('');

// Build the A-Z index bar showing every letter of the alphabet (not just
// the ones with contacts) — letters with no contacts are still shown, just
// dimmed and inert, so the index's shape stays a recognizable, consistent
// full alphabet rather than a variable-length list that shifts around
// depending on which letters happen to be present.
azIndex.innerHTML = ALL_LETTERS.map((letter) => {
  const hasContacts = availableLetters.includes(letter);
  return `<span class="az-index-letter${hasContacts ? '' : ' disabled'}" data-letter="${letter}" style="${hasContacts ? '' : 'opacity:0.25;cursor:default;'}">${letter}</span>`;
}).join('');

function jumpToLetter(letter) {
  const group = document.getElementById('group-' + letter);
  if (!group) return; // letter has no contacts — nothing to jump to
  group.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function showBubble(letter) {
  azBubble.textContent = letter;
  azBubble.hidden = false;
  Array.from(azIndex.children).forEach((el) => {
    el.classList.toggle('active', el.dataset.letter === letter);
  });
}

function hideBubble() {
  azBubble.hidden = true;
  Array.from(azIndex.children).forEach((el) => el.classList.remove('active'));
}

// The index bar supports both a tap on a single letter AND a drag/swipe up
// and down the whole bar (like a real contacts app) — touch-based dragging
// is implemented by reading which letter element is under the pointer's
// CURRENT position on every move, via elementFromPoint, rather than only
// responding to discrete tap targets.
let dragging = false;

function letterFromPoint(clientX, clientY) {
  const el = document.elementFromPoint(clientX, clientY);
  return el && el.classList.contains('az-index-letter') ? el.dataset.letter : null;
}

azIndex.addEventListener('pointerdown', (e) => {
  dragging = true;
  azIndex.setPointerCapture(e.pointerId);
  const letter = letterFromPoint(e.clientX, e.clientY);
  if (letter) { showBubble(letter); jumpToLetter(letter); }
});

azIndex.addEventListener('pointermove', (e) => {
  if (!dragging) return;
  const letter = letterFromPoint(e.clientX, e.clientY);
  if (letter) { showBubble(letter); jumpToLetter(letter); }
});

azIndex.addEventListener('pointerup', () => { dragging = false; hideBubble(); });
azIndex.addEventListener('pointercancel', () => { dragging = false; hideBubble(); });