Edit Scroll

Name

Also known as (comma separated)

Brief definition Move through overflowing content.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "style", "type": "select", "label": "Overflow hint", "default": "fade-edge", "options": [ "fade-edge", "shadow-hint", "scrollbar-visible" ] }, { "id": "scrolled", "type": "toggle", "label": "Scrolled down", "default": false }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"scroll-demo\" data-style=\"{{style}}\" style=\"--accent:{{accent}};\">\n <div class=\"scroll-demo__viewport\">\n <div class=\"scroll-demo__list{{#if scrolled}} is-scrolled{{/if}}\">\n <div class=\"scroll-demo__row\">Notification settings</div>\n <div class=\"scroll-demo__row\">Privacy</div>\n <div class=\"scroll-demo__row\">Billing</div>\n <div class=\"scroll-demo__row\">Integrations</div>\n <div class=\"scroll-demo__row\">Danger zone</div>\n </div>\n </div>\n <p class=\"scroll-demo__caption\">{{#if scrolled}}scrolled &mdash; more content is above{{/if}}{{unless scrolled}}at top &mdash; scroll to see more below{{/unless}}</p>\n</div>\n<style>\n.scroll-demo { width: 260px; font: 14px system-ui, sans-serif; color: #241430; }\n.scroll-demo__viewport { position: relative; height: 120px; border-radius: 10px; overflow: hidden; border: 1.5px solid #24143022; }\n.scroll-demo__list { display: flex; flex-direction: column; }\n.scroll-demo__list.is-scrolled { transform: translateY(-64px); }\n@media (prefers-reduced-motion: no-preference) {\n .scroll-demo__list { transition: transform .2s; }\n}\n.scroll-demo__row { padding: 14px 12px; border-bottom: 1px solid #24143014; background: #FAF7F2; }\n.scroll-demo[data-style=\"fade-edge\"] .scroll-demo__viewport::after { content: \"\"; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: linear-gradient(to bottom, transparent, #FAF7F2); pointer-events: none; }\n.scroll-demo[data-style=\"shadow-hint\"] .scroll-demo__viewport { box-shadow: inset 0 -12px 10px -10px rgba(36,20,48,.25); }\n.scroll-demo[data-style=\"scrollbar-visible\"] .scroll-demo__viewport { border-right: 6px solid #24143022; }\n.scroll-demo[data-style=\"scrollbar-visible\"] .scroll-demo__viewport::before { content: \"\"; position: absolute; right: -6px; top: 8px; width: 6px; height: 40px; background: var(--accent); border-radius: 3px; }\n.scroll-demo__caption { margin-top: 10px; font-size: 12px; color: #241430aa; }\n</style>", "tailwind": "<div class=\"scroll-tw scroll-tw--{{style}} relative\" style=\"width:260px;font-family:system-ui,sans-serif;color:#241430\">\n <div class=\"h-[120px] rounded-[10px] overflow-hidden border-[1.5px]\" style=\"border-color:#24143022\">\n <div class=\"scroll-tw__list{{#if scrolled}} is-scrolled{{/if}} flex flex-col motion-safe:transition-transform\">\n <div class=\"px-3 py-3.5 border-b bg-[#FAF7F2]\" style=\"border-color:#24143014\">Notification settings</div>\n <div class=\"px-3 py-3.5 border-b bg-[#FAF7F2]\" style=\"border-color:#24143014\">Privacy</div>\n <div class=\"px-3 py-3.5 border-b bg-[#FAF7F2]\" style=\"border-color:#24143014\">Billing</div>\n <div class=\"px-3 py-3.5 border-b bg-[#FAF7F2]\" style=\"border-color:#24143014\">Integrations</div>\n <div class=\"px-3 py-3.5 bg-[#FAF7F2]\">Danger zone</div>\n </div>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430aa]\">{{#if scrolled}}scrolled &mdash; more content is above{{/if}}{{unless scrolled}}at top &mdash; scroll to see more below{{/unless}}</p>\n</div>\n<style>\n.scroll-tw__list.is-scrolled { transform: translateY(-64px); }\n.scroll-tw--fade-edge .scroll-tw__list { mask-image: linear-gradient(to bottom, black 85%, transparent); }\n.scroll-tw--shadow-hint { box-shadow: inset 0 -12px 10px -10px rgba(36,20,48,.25); }\n.scroll-tw--scrollbar-visible { border-right: 6px solid #24143022; }\n.scroll-tw--scrollbar-visible::before { content: \"\"; position: absolute; right: -6px; top: 8px; width: 6px; height: 40px; background: {{accent}}; border-radius: 3px; }\n</style>", "react": "export function ScrollDemo({\n style = \"{{style}}\",\n scrolled = {{scrolled}},\n accent = \"{{accent}}\",\n}) {\n const rows = [\"Notification settings\", \"Privacy\", \"Billing\", \"Integrations\", \"Danger zone\"];\n const viewportExtra = {\n \"fade-edge\": {},\n \"shadow-hint\": { boxShadow: \"inset 0 -12px 10px -10px rgba(36,20,48,.25)\" },\n \"scrollbar-visible\": { borderRight: \"6px solid #24143022\" },\n }[style];\n return (\n <div style={{ width: 260, fontFamily: \"system-ui, sans-serif\", fontSize: 14, color: \"#241430\" }}>\n <div style={{ position: \"relative\", height: 120, borderRadius: 10, overflow: \"hidden\", border: \"1.5px solid #24143022\", ...viewportExtra }}>\n <div className=\"scroll-list\" style={{ display: \"flex\", flexDirection: \"column\", transform: scrolled ? \"translateY(-64px)\" : \"none\" }}>\n {rows.map((r) => <div key={r} style={{ padding: \"14px 12px\", borderBottom: \"1px solid #24143014\", background: \"#FAF7F2\" }}>{r}</div>)}\n </div>\n {style === \"fade-edge\" && <div style={{ position: \"absolute\", left: 0, right: 0, bottom: 0, height: 24, background: \"linear-gradient(to bottom, transparent, #FAF7F2)\", pointerEvents: \"none\" }} />}\n {style === \"scrollbar-visible\" && <div style={{ position: \"absolute\", right: -6, top: 8, width: 6, height: 40, background: accent, borderRadius: 3 }} />}\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430aa\" }}>{scrolled ? \"scrolled \\u2014 more content is above\" : \"at top \\u2014 scroll to see more below\"}</p>\n <style>{`\n @media (prefers-reduced-motion: no-preference) {\n .scroll-list { transition: transform .2s; }\n }\n `}</style>\n </div>\n );\n}" }