05Drag-to-scroll gallery

Dragging the tiles like grabbing them scrolls the gallery sideways, and it stops where you release.

Best forPortfolio thumbnail rows, product thumbnail sliders

scrollLeft 직접 조작overflow-x: auto 네이티브 터치cursor: grab/grabbing

<main class="stage">
  <div class="dg-wrap">
    <div class="dg-viewport is-demo">
      <div class="dg-track">
        <span class="dg-tile" style="background:#ff9ebb"></span>
        <span class="dg-tile" style="background:#d2c7a4"></span>
        <span class="dg-tile" style="background:#c3d6e2"></span>
        <span class="dg-tile" style="background:#90c8b5"></span>
        <span class="dg-tile" style="background:#b9a0ff"></span>
      </div>
    </div>
    <span class="dg-hint" aria-hidden="true">
      <svg viewBox="0 0 256 256"><g fill="currentColor"><path d="M208 80v96H48V80Z" opacity=".2"/><path d="m213.66 181.66l-32 32a8 8 0 0 1-11.32-11.32L188.69 184H48a8 8 0 0 1 0-16h140.69l-18.35-18.34a8 8 0 0 1 11.32-11.32l32 32a8 8 0 0 1 0 11.32m-139.32-64a8 8 0 0 0 11.32-11.32L67.31 88H208a8 8 0 0 0 0-16H67.31l18.35-18.34a8 8 0 0 0-11.32-11.32l-32 32a8 8 0 0 0 0 11.32Z"/></g></svg>
      Drag
    </span>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-base;
$easing: $ease-spring;
$color: $stage-ink;

@include stage($stage-yellow);

.dg-wrap {
  width: min(240px, 78vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $sp-3;
}

.dg-viewport {
  width: 100%;
  height: 96px;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: $r-card;
  cursor: grab;
  touch-action: pan-x;                    // 세로 스크롤은 페이지에 그대로 남긴다
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }
  &.is-grabbing { cursor: grabbing; }
}

.dg-track {
  display: flex;
  gap: $sp-3;
  width: max-content;
  padding: $sp-1;
}

.dg-tile {
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  border-radius: $r-card;
  box-shadow: 0 4px 10px rgba(23, 20, 26, .18);
}

.dg-hint {
  display: inline-flex;
  align-items: center;
  gap: $sp-1;
  padding: $sp-1 $sp-3;
  border-radius: $r-pill;
  background: rgba(23, 20, 26, .08);
  color: $color;
  font-size: 11px;
  font-weight: 700;
}
.dg-hint svg { width: 14px; height: 14px; }

// 데모 강제 루프 — 실제 scrollLeft 대신 transform 으로 같은 드래그 동작을 흉내 (WAAPI 는 scrollLeft 를 못 잰다)
.dg-viewport.is-demo { overflow: hidden; }
.dg-viewport.is-demo .dg-track { animation: dg-drag $dur-loop $easing infinite; }
@keyframes dg-drag {
  0%, 8%    { transform: translateX(0); }
  50%       { transform: translateX(-172px); }
  92%, 100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .dg-track { animation: none !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffd23f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.dg-wrap {
  width: min(240px, 78vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.dg-viewport {
  width: 100%;
  height: 96px;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 16px;
  cursor: grab;
  touch-action: pan-x;
  scrollbar-width: none;
}
.dg-viewport::-webkit-scrollbar {
  display: none;
}
.dg-viewport.is-grabbing {
  cursor: grabbing;
}

.dg-track {
  display: flex;
  gap: 12px;
  width: max-content;
  padding: 4px;
}

.dg-tile {
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(23, 20, 26, 0.18);
}

.dg-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(23, 20, 26, 0.08);
  color: #17141a;
  font-size: 11px;
  font-weight: 700;
}

.dg-hint svg {
  width: 14px;
  height: 14px;
}

.dg-viewport.is-demo {
  overflow: hidden;
}

.dg-viewport.is-demo .dg-track {
  animation: dg-drag 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes dg-drag {
  0%, 8% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-172px);
  }
  92%, 100% {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dg-track {
    animation: none !important;
  }
}

(function () {
  var vp = document.querySelector('.dg-viewport');
  var dragging = false, startX = 0, startScroll = 0;
  // 실제 사용자: pointerdown 후 움직인 거리만큼 scrollLeft 를 직접 옮긴다 (transform 이 아니라 진짜 스크롤)
  vp.addEventListener('pointerdown', function (e) {
    if (vp.classList.contains('is-demo')) return;
    dragging = true; startX = e.clientX; startScroll = vp.scrollLeft;
    vp.classList.add('is-grabbing'); vp.setPointerCapture(e.pointerId);
  });
  vp.addEventListener('pointermove', function (e) {
    if (!dragging) return;
    vp.scrollLeft = startScroll - (e.clientX - startX);
  });
  ['pointerup', 'pointercancel'].forEach(function (ev) {
    vp.addEventListener(ev, function () { dragging = false; vp.classList.remove('is-grabbing'); });
  });
})();

import { useRef, useState, type CSSProperties, type PointerEvent } from "react";
import styles from "./CursorDragScrollGallery.module.scss";

export type CursorDragScrollGalleryProps = {
  colors?: string[];
  duration?: number;
  easing?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string };

/** pointerdown 시작점 대비 이동 거리로 실제 scrollLeft 를 옮긴다 (transform 이 아니라 진짜 스크롤) */
export default function CursorDragScrollGallery({
  colors = ["#ff9ebb", "#ffd23f", "#6ec8ff", "#4cd4a6", "#b9a0ff"],
  duration = 300,
  easing = "cubic-bezier(.2,.8,.2,1)",
}: CursorDragScrollGalleryProps) {
  const vpRef = useRef<HTMLDivElement>(null);
  const [dragging, setDragging] = useState(false);
  const start = useRef<{ x: number; scroll: number }>({ x: 0, scroll: 0 });
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing };

  const down = (e: PointerEvent<HTMLDivElement>) => {
    const vp = vpRef.current;
    if (!vp) return;
    start.current = { x: e.clientX, scroll: vp.scrollLeft };
    setDragging(true);
    vp.setPointerCapture(e.pointerId);
  };
  const move = (e: PointerEvent<HTMLDivElement>) => {
    if (!dragging || !vpRef.current) return;
    const s = start.current ?? { x: 0, scroll: 0 };
    vpRef.current.scrollLeft = s.scroll - (e.clientX - s.x);
  };

  return (
    <div className={styles.wrap} style={vars}>
      <div
        ref={vpRef}
        className={`${styles.viewport} ${dragging ? styles.grabbing : ""}`}
        onPointerDown={down}
        onPointerMove={move}
        onPointerUp={() => setDragging(false)}
        onPointerCancel={() => setDragging(false)}
      >
        <div className={styles.track}>
          {colors.map((c, i) => (
            <span key={i} className={styles.tile} style={{ background: c }} />
          ))}
        </div>
      </div>
      <span className={styles.hint}>
        <svg viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="M208 80v96H48V80Z" opacity=".2" /><path d="m213.66 181.66l-32 32a8 8 0 0 1-11.32-11.32L188.69 184H48a8 8 0 0 1 0-16h140.69l-18.35-18.34a8 8 0 0 1 11.32-11.32l32 32a8 8 0 0 1 0 11.32m-139.32-64a8 8 0 0 0 11.32-11.32L67.31 88H208a8 8 0 0 0 0-16H67.31l18.35-18.34a8 8 0 0 0-11.32-11.32l-32 32a8 8 0 0 0 0 11.32Z" /></g></svg>
        드래그
      </span>
    </div>
  );
}

Open in a new tab

05 Drag-to-scroll gallery — Measured area 13.938% · moving frames 20/23Original by GODRICH · SCSS and React ship in the zip · 9 Mouse Effects CSS Tricks You Can Copy-Paste

The post this demo lives in

9 Mouse Effects CSS Tricks You Can Copy-Paste - preview of all 9 demos

9 Mouse Effects CSS Tricks You Can Copy-PasteMouse effects css tricks are small interactions that react to pointer moves, clicks, drags, or scrolls. The cursor barel See all demos in this post

05Drag-to-scroll gallery

The post this demo lives in

If you like this effect - similar demos