Edge Swipe Back Navigation — Free HTML CSS JS Snippet

<div class="es-phone">
  <div class="es-statusbar"></div>
  <div class="es-stack" id="esStack"></div>
  <div class="es-edge-hint" aria-hidden="true"></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; }

.es-phone {
  position: relative; width: 300px; height: 540px; background: #0f172a;
  border-radius: 32px; padding: 10px; box-shadow: 0 24px 60px rgba(15,23,42,0.35);
  overflow: hidden; touch-action: pan-y;
}
.es-statusbar { position: absolute; top: 10px; left: 10px; right: 10px; height: 20px; z-index: 50; }

.es-stack { position: relative; width: 100%; height: 100%; border-radius: 22px; overflow: hidden; background: #fff; }

.es-screen {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  will-change: transform;
}
.es-screen-header {
  display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px;
  border-bottom: 1px solid #f1f5f9; flex-shrink: 0;
}
.es-back-btn { border: none; background: none; padding: 4px; cursor: pointer; color: #6366f1; display: flex; }
.es-screen-title { font-size: 15px; font-weight: 800; color: #1e293b; }
.es-screen-body { flex: 1; padding: 18px 16px; overflow-y: auto; }
.es-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px; background: #f8fafc; border-radius: 10px; margin-bottom: 8px;
  font-size: 13px; font-weight: 600; color: #334155; cursor: pointer;
}
.es-row:active { background: #eef2ff; }
.es-hint-text { font-size: 11.5px; color: #94a3b8; line-height: 1.6; margin-top: 6px; }

/* A visible shadow-scrim on the layer beneath the active screen, like iOS,
   so the peeking previous screen visually recedes rather than sitting flush. */
.es-screen.es-below::after {
  content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.18);
  transition: opacity 0.05s;
}

.es-edge-hint {
  position: absolute; left: 10px; top: 50%; width: 4px; height: 46px; margin-top: -23px;
  background: rgba(255,255,255,0.28); border-radius: 3px; pointer-events: none; z-index: 60;
}

const stackEl = document.getElementById('esStack');

const SCREENS = [
  { id: 'home', title: 'Inbox', rows: ['Design review — Priya', 'Q3 roadmap draft', 'Standup notes', 'Client feedback thread'] },
  { id: 'thread', title: 'Design review', rows: ['Priya: Left comments on frame 4', 'You: Fixing the spacing now', 'Priya: Looks great, ship it'] },
  { id: 'detail', title: 'Frame 4 comments', rows: ['Line-height too tight on mobile', 'Button contrast fails AA', 'Resolved by Priya'] },
];

let stack = [0]; // indices into SCREENS currently pushed
let screenEls = [];

function iconSvg(name) {
  if (name === 'back') return '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>';
  return '';
}

function buildScreen(screenIdx) {
  const data = SCREENS[screenIdx];
  const el = document.createElement('div');
  el.className = 'es-screen';
  el.dataset.idx = String(screenIdx);

  const canGoBack = stack.length > 1 || stack.indexOf(screenIdx) > 0;
  el.innerHTML = `
    <div class="es-screen-header">
      ${screenIdx !== 0 ? '<button class="es-back-btn" aria-label="Back">' + iconSvg('back') + '</button>' : '<span style="width:20px"></span>'}
      <span class="es-screen-title">${data.title}</span>
    </div>
    <div class="es-screen-body">
      ${data.rows.map((r, i) => '<div class="es-row" data-row="' + i + '">' + r + '</div>').join('')}
      ${screenIdx < SCREENS.length - 1 ? '<p class="es-hint-text">Tap a row to push the next screen. Swipe right from the left edge, or tap the back arrow, to pop back.</p>' : '<p class="es-hint-text">This is the deepest screen in the stack — swipe from the left edge or tap back.</p>'}
    </div>`;

  const backBtn = el.querySelector('.es-back-btn');
  if (backBtn) backBtn.addEventListener('click', () => pop());

  el.querySelectorAll('.es-row').forEach((row, i) => {
    row.addEventListener('click', () => {
      const nextIdx = Math.min(SCREENS.length - 1, screenIdx + 1);
      if (nextIdx !== screenIdx) push(nextIdx);
    });
  });

  return el;
}

function renderStack() {
  stackEl.innerHTML = '';
  screenEls = stack.map(idx => buildScreen(idx));
  screenEls.forEach((el, i) => {
    el.style.transform = i === screenEls.length - 1 ? 'translateX(0)' : 'translateX(-30%)';
    el.style.transition = 'transform 0.28s cubic-bezier(0.32,0.72,0,1)';
    if (i < screenEls.length - 1) el.classList.add('es-below');
    stackEl.appendChild(el);
  });
}

function push(screenIdx) {
  stack.push(screenIdx);
  renderStack();
}

function pop() {
  if (stack.length <= 1) return;
  const topEl = screenEls[screenEls.length - 1];
  const belowEl = screenEls[screenEls.length - 2];
  if (topEl) {
    topEl.style.transition = 'transform 0.26s cubic-bezier(0.32,0.72,0,1)';
    topEl.style.transform = 'translateX(100%)';
  }
  if (belowEl) {
    belowEl.style.transition = 'transform 0.26s cubic-bezier(0.32,0.72,0,1)';
    belowEl.style.transform = 'translateX(0)';
    belowEl.classList.remove('es-below');
  }
  setTimeout(() => {
    stack.pop();
    renderStack();
  }, 260);
}

// --- Edge-swipe-to-go-back gesture handling ---
const EDGE_ZONE = 24; // px from the left edge that starts tracking a swipe
let dragging = false;
let dragStartX = 0;
let dragCurrentX = 0;
let dragWidth = 300;

stackEl.addEventListener('pointerdown', (e) => {
  const rect = stackEl.getBoundingClientRect();
  const localX = e.clientX - rect.left;
  if (localX > EDGE_ZONE || stack.length <= 1) return;
  dragging = true;
  dragStartX = e.clientX;
  dragWidth = rect.width;
  screenEls.forEach(el => { el.style.transition = 'none'; });
  stackEl.setPointerCapture(e.pointerId);
});

stackEl.addEventListener('pointermove', (e) => {
  if (!dragging) return;
  dragCurrentX = Math.max(0, e.clientX - dragStartX);
  const progress = Math.min(1, dragCurrentX / dragWidth);
  const topEl = screenEls[screenEls.length - 1];
  const belowEl = screenEls[screenEls.length - 2];
  if (topEl) topEl.style.transform = `translateX(${progress * 100}%)`;
  if (belowEl) belowEl.style.transform = `translateX(${-30 * (1 - progress)}%)`;
});

function endDrag(e) {
  if (!dragging) return;
  dragging = false;
  const progress = Math.min(1, dragCurrentX / dragWidth);
  screenEls.forEach(el => { el.style.transition = 'transform 0.22s cubic-bezier(0.32,0.72,0,1)'; });
  if (progress > 0.35) {
    pop();
  } else {
    const topEl = screenEls[screenEls.length - 1];
    const belowEl = screenEls[screenEls.length - 2];
    if (topEl) topEl.style.transform = 'translateX(0)';
    if (belowEl) belowEl.style.transform = 'translateX(-30%)';
  }
  dragCurrentX = 0;
}

stackEl.addEventListener('pointerup', endDrag);
stackEl.addEventListener('pointercancel', endDrag);

renderStack();