# Horizontal Scroll
> A section that pins itself while its cards slide sideways as you scroll down. Pictures drift in their frames, the counter rolls. A swipe on touch.
Scroll · scroll, horizontal, sticky, gallery · HTML, CSS, vanilla JS · no dependencies · updated 2026-10-16
Demo: https://kodza.dev/components/horizontal-scroll/
Takes the whole screen (or reacts to the page scroll): give it a page, not a small box.
## Files
The code below, served as files: byte for byte what the Kodza site copies (the CSS includes its theme guard).
- [`kodza-horizontal-scroll.css`](https://kodza.dev/registry/horizontal-scroll/kodza-horizontal-scroll.css) · 11.4 KB
- [`kodza-horizontal-scroll.js`](https://kodza.dev/registry/horizontal-scroll/kodza-horizontal-scroll.js) · 6.2 KB
- [`kodza-horizontal-scroll.html`](https://kodza.dev/registry/horizontal-scroll/kodza-horizontal-scroll.html) · 2.5 KB · the markup, to adapt and paste into your page
**Can you run shell commands? Download the CSS and the JS, don't retype them.** Retyping costs thousands of tokens and can drop or change lines of the CSS. Put the files where your stack expects them (Use it says where: change the `-o` paths):
```bash
curl -fsSL --create-dirs -o kodza/kodza-horizontal-scroll.css https://kodza.dev/registry/horizontal-scroll/kodza-horizontal-scroll.css
curl -fsSL --create-dirs -o kodza/kodza-horizontal-scroll.js https://kodza.dev/registry/horizontal-scroll/kodza-horizontal-scroll.js
```
Then load the files from your page as Use it shows, instead of pasting the content. The HTML is the part you adapt (text, links, modifiers): paste it from the Code section. Copy the CSS and the JS from the Code section only if you can't run commands, exactly as they are. (Windows PowerShell: `curl.exe`.)
## API
- Root: `.kodza-hscroll`
- Variables (set them on the root element itself: it declares its own defaults):
- `--kz-hscroll-fg: #0a0a0a`
- `--kz-hscroll-muted: rgba(10, 10, 10, 0.62)`
- `--kz-hscroll-line: rgba(10, 10, 10, 0.12)`
- `--kz-hscroll-card: 46vh`
- `--kz-hscroll-gap: 16px`
- `--kz-hscroll-gutter: max(24px, calc((100vw - 1080px) / 2))`
- `--kz-hscroll-radius: 16px`
- `--kz-hscroll-drift: 8%`
- Lifecycle: `kodza:init` / `kodza:destroy` on `document`, with `{ detail: { root } }` to target a container.
## Dark mode
The values Kodza uses on a dark background (`#0a0a0a`). For a page that follows the system theme, add them after the component's CSS:
```css
@media (prefers-color-scheme: dark) {
.kodza-hscroll {
--kz-hscroll-fg: #f2f2f0;
--kz-hscroll-muted: rgba(242, 242, 240, 0.62);
--kz-hscroll-line: rgba(255, 255, 255, 0.16);
}
}
```
A site with its own theme switch puts the same rules under its dark selector instead (`[data-theme="dark"] .kodza-hscroll { … }`); a single dark section, under that section's class.
Its images have dark versions next to them (`kz-steps-1400.webp` → `kz-steps-dark-1400.webp`). To swap them on a dark page: ``.
## Use it
### Plain HTML page
- CSS: `kodza/kodza-horizontal-scroll.css` next to the page (the Files commands as they are), linked in ``: ``. Without a shell, paste it in a `
