| CARVIEW |
Select Language
HTTP/2 301
server: GitHub.com
content-type: text/html
location: https://flackr.github.io/carousel/scroll-button/
access-control-allow-origin: *
expires: Sun, 28 Dec 2025 22:06:47 GMT
cache-control: max-age=600
x-proxy-cache: MISS
x-github-request-id: 2D98:2C10E1:80C27F:907ADF:6951A79E
accept-ranges: bytes
age: 0
date: Sun, 28 Dec 2025 21:56:47 GMT
via: 1.1 varnish
x-served-by: cache-bom-vanm7210095-BOM
x-cache: MISS
x-cache-hits: 0
x-timer: S1766959007.236438,VS0,VE201
vary: Accept-Encoding
x-fastly-request-id: 30aca63fbf0eac8ddd5b1c6d039e9e0c382d79c0
content-length: 162
HTTP/2 200
server: GitHub.com
content-type: text/html; charset=utf-8
last-modified: Fri, 08 Nov 2024 13:57:23 GMT
access-control-allow-origin: *
etag: W/"672e18c3-115a"
expires: Sun, 28 Dec 2025 22:06:47 GMT
cache-control: max-age=600
content-encoding: gzip
x-proxy-cache: MISS
x-github-request-id: 4B8F:2916CC:813712:90EF29:6951A79F
accept-ranges: bytes
age: 0
date: Sun, 28 Dec 2025 21:56:47 GMT
via: 1.1 varnish
x-served-by: cache-bom-vanm7210095-BOM
x-cache: MISS
x-cache-hits: 0
x-timer: S1766959007.451056,VS0,VE207
vary: Accept-Encoding
x-fastly-request-id: 31e6a11157f2c6033be4bfd7e6efe5dbf015b26a
content-length: 1704
Scroll-*-button | carousel
carousel
Scroll-*-button
Proposal
Allow the creation of interactive scroll buttons as pseudo-elements, e.g.
.scroller {
overflow: auto;
}
.scroller::scroll-down-button {
content: "v";
}
.scroller::scroll-up-button {
content: "^";
}
These should be focusable, behaving as a button. When activated, a scroll should be performed in the direction by some amount. When it is not possible to scroll in that direction, they should be disabled.
The order of the pseudo-elements with respect to the element should be:
- block direction previous,
- inline direction previous,
- the scrolling element,
- inline direction next,
- block direction next.
Open questions
Amount to scroll
What is the standard amount for a scroll? Options:
- One page
- Equivalent to pressing that direction on the keyboard
There are use cases where scrolling by a page at a time is nice. There are also use cases where scrolling one item (e.g. with scroll snap areas) is preferable.
Example
See the example using the polyfill.
This site is open source. Improve this page.