Scrollable

Intro

scrollable does two things:

1. It adds an overflow:auto property to the container.
2. It enables CSS Scroll Snap

Scrollable Horizontal

You can create a horizontal scrollable component with scrollable-horizontal. This turns the element into a horizontal flexbox container.

<div class="scrollable-horizontal">
  ...
</div>

Scrollable Vertical

You can create a vertical scrollable component with scrollable-vertical. This requires the element to have an height (which can be explicitly declared with height or intrinsically sized as a flex or grid item)

<div class="scrollable-vertical max-h-60">
  ...
</div>

CSS Scroll Snap

CSS Scroll Snap is enabled in scrollable (both horizontal and vertical) by default. To alter CSS Scroll Snap behaviour and positions, you can change:

• --snap-type
• --snap-align
• --scroll-margin.

Snap Type

--snap-type determines the strictness of the snap points if there is one.

Possible values are:

• none: Disables CSS Scroll Snap
• proximity: Enforces snap points loosely. (Default value).
• mandatory: Enforces snap points strictly

<div class="scrollable-horizontal [--snap-type:mandatory]">
  ...
</div>

Snap Align

--snap-align determines where the snap point is. Possible values are: start (default), center, and end.

<div class="scrollable-horizontal [--snap-align:center]">
  ...
</div>

Scroll Margin

--scroll-margin determines the amount of space between the edge of the container and the snap point. The default value is 1rlh.

<div class="scrollable-horizontal [--snap-align:center]">
  ...
</div>

Disabling CSS Scroll Snap

To disable CSS Scroll Snap, you can use scrollable-nosnap or set --snap-type to none

<div class="scrollable-horizontal scrollable-nosnap">
  ...
</div>

Prefer horizontal Scroll

Most people don’t know they can scroll horizontal content by pressing down the shift key, then scrolling with the mouse wheel. It’s a pity if you included horizontal scrollbars in your design only to have your users miss them.

So, we’ve created an additional script you can use to combat this problem. This script converts vertical scrolls to horizontal scrolls with finese and taste. (As much as possible, at least)

Here’s what it does in a nutshell:

It hijacks vertical mousewheel scrolls only when these conditions are met:

1. There is horizontal overflow
2. The user is mousing over the scrollable-horizontal element
3. The user is scrolling vertically
4. The user has not scrolled to the end

When this happens:

• The full vertical scroll amount is transferred to horizontal scroll to retain the user’s intent to scroll.
• When the user has scrolled to the end of the scrollable-horizontal element, the script releases the hijack and allows users to scroll vertically again.
• It does not hijack trackpad scrolls because users can scroll horizontally with trackpads

Using the script

To use the script, you need to import and run scrollablehorizontal from the layouts library.

import { scrollablehorizontal } from '@splendidlabz/layouts/scripts'
scrollablehorizontal()

Next, add the scrollable-prefer-horizontal class to your scrollable-horizontal element.

<div class="scrollable-horizontal scrollable-prefer-horizontal">
  ...
</div>

Usage with CSS Scroll Snap

scrollablehorizontal disables CSS Scroll Snap when scrolling in order for a scroll to work as you would expect. It enables CSS Scroll Snap again after scrolling.

You can adjust this delay between when a user scrolls and when CSS Scroll Snap is enabled again with --scroll-snap-delay(in milliseconds).

<div class="scrollable-horizontal scrollable-prefer-horizontal [--scroll-snap-delay:2000]">
  ...
</div>

Async containers

The scrollableHorizontal script does not scan for scrollable-horizontal elements that were created after the script has run.

If you add a scrollable layout afterward and you want to use scrollable-prefer-horizontal, make sure you run the scrollablehorizontal script again when the component is loaded.

Styling scrollbars

The best way to style scrollbars is through the scrollbars effect.

* {
  --scrollbar-width: thin;
  --scrollbar-size: 12px;
  --scrollbar-thumb-color: pink;
  --scrollbar-track-color: darkpink;
}

Preserving outlines

When scrollable components have an overflow, the container behaves somewhat like overflow:hidden and outlines will be cut off.

To prevent outlines from being cut off, you can use preserve-outlines from Splendid Styles. This adds negative margins and positive paddings to expand the scrollable container — just enough to show the outlines.

Here’s the CSS for scrollable.

.scrollable-horizontal {
  overflow: auto hidden;
  display: flex;
  gap: var(--gap, 1rlh);
  flex-direction: row;
  max-width: 100%;
  scroll-snap-type: x var(--snap-type, proximity);

  > :where(*) {
    flex-grow: 0;
    flex-shrink: 0;
    scroll-snap-align: var(--snap-align);
    scroll-margin: var(--scroll-margin);
  }
}

.scrollable-vertical {
  overflow: hidden auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap, 1rlh);
  scroll-snap-type: y var(--snap-type, proximity);

  > :where(*) {
    flex-grow: 0;
    flex-shrink: 0;
    scroll-snap-align: var(--snap-align);
    scroll-margin: var(--scroll-margin);
  }
}

.scrollable-nosnap {
  --snap-type: none;
}

Scrollable

Modifiers

CSS Variables