v149 · overscroll · messaging

Chat Reactions

Swipe (or drag) any message bubble left or right to reveal a reaction bar — emoji reactions and a reply button anchored just off-screen. A native-app gesture pattern built with overscroll-behavior and pointer events, no external libraries.

💡 On desktop: click and drag a message bubble horizontally. On mobile: swipe left or right on any message.
Chat with Alex 0 reactions
← drag a message to reveal reactions →
/* The reaction bar lives just off-screen relative to the bubble.
   A horizontal scroll on the bubble-wrap element reveals it. */

.bubble-wrap {
  overflow-x: scroll;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

.bubble        { scroll-snap-align: start; }
.reaction-bar  { scroll-snap-align: end; }

/* When scroll position passes 40px,
   programmatically snap to reveal panel: */
bubbleWrap.addEventListener('scroll', () => {
  if (bubbleWrap.scrollLeft > 40) {
    revealReactions(bubble);
  }
});

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗