1
Description text is here and goes on for a little while.
There are two components that help modify the scroll direction of a particular container.
Force an elements overflow to be horizontally scrollable by using .scroll-horizontal.
This container has a horizontal scrollbar if the content exceeds its width.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
Force an elements overflow to be vertically scrollable by using .scroll-vertical. Note that this will only occur if the elements height is constrained.
This container has a vertical scrollbar if its height is constrained.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
▼
On narrow widths, this pattern provides a horizontally scrolling swipe-friend container. It also provides pagination support for better keyboard navigation. This pattern should be used for small screens (mobile, tablet) only and should be hidden on large screens (desktop, widescreen).
A word of warning, if your inner elements contain focusable elements, you will need to implement a custom "skip focus" interaction to allow a user navigating with a keyboard to skip this section and go directly to pagination if they so choose.
Additionally, if your element is injected into the DOM after the initSnapScroll function has been run initially, then you will need to manually run initSnapScrollScrollListeners(yourElement) to achieve correct pagination highlighting. See js/behaviors/snap-scroll.ts for relevant code.
Note: data-focusable-if-scrollable, the attribute we use to programmatically make elements focusable if they are scrollable, is left to you to implement. Our implementation lives in /site/src/scaffold/scripts/focusable-if-scrollable.ts
2
Description text is here and goes on for a little while.
3
Description text is here and goes on for a little while.
4
Description text is here and goes on for a little while.
5
Description text is here and goes on for a little while.
6
Description text is here and goes on for a little while.
7
Description text is here and goes on for a little while.
Even more text.
HTML
<section id="snap-scroll-1" class="width-full width-500-tablet display-none-widescreen" data-snap-scroll="first-one">
<div class="scroll-horizontal scroll-snap-container display-flex padding-bottom-xs" data-snap-scroll-slides data-focusable-if-scrollable>
<article class="padding-sm border scroll-snap-item" id="one" data-snap-scroll-slide="first-one-1">
<h3 class="font-size-lg">1</h3>
<p>Description text is here and goes on for a little while.</p>
</article>
<article class="padding-sm border scroll-snap-item" id="two" data-snap-scroll-slide="first-one-2">
<h3 class="font-size-lg">2</h3>
<p>Description text is here and goes on for a little while.</p>
</article>
<article class="padding-sm border scroll-snap-item" id="three" data-snap-scroll-slide="first-one-3">
<h3 class="font-size-lg">3</h3>
<p>Description text is here and goes on for a little while.</p>
</article>
<article class="padding-sm border scroll-snap-item" id="four" data-snap-scroll-slide="first-one-4">
<h3 class="font-size-lg">4</h3>
<p>Description text is here and goes on for a little while.</p>
</article>
<article class="padding-sm border scroll-snap-item" id="five" data-snap-scroll-slide="first-one-5">
<h3 class="font-size-lg">5</h3>
<p>Description text is here and goes on for a little while.</p>
</article>
<article class="padding-sm border scroll-snap-item" id="six" data-snap-scroll-slide="first-one-6">
<h3 class="font-size-lg">6</h3>
<p>Description text is here and goes on for a little while.</p>
</article>
<article class="padding-sm border scroll-snap-item" id="seven" data-snap-scroll-slide="first-one-7">
<h3 class="font-size-lg">7</h3>
<p>
Description text is here and goes on for a little while. <br />
Even more text.
</p>
</article>
</div>
<nav class="pagination" role="navigation" aria-label="pagination" data-snap-scroll-nav="first-one">
<ul class="pagination-list">
<li>
<a href="#first-one-1" class="pagination-link is-current" data-snap-scroll-nav-item="first-one-1">1</a>
</li>
<li>
<a href="#first-one-2" class="pagination-link" data-snap-scroll-nav-item="first-one-2">2</a>
</li>
<li>
<a href="#first-one-3" class="pagination-link" data-snap-scroll-nav-item="first-one-3">3</a>
</li>
<li>
<a href="#first-one-4" class="pagination-link" data-snap-scroll-nav-item="first-one-4">4</a>
</li>
<li>
<a href="#first-one-5" class="pagination-link" data-snap-scroll-nav-item="first-one-5">5</a>
</li>
<li>
<a href="#first-one-6" class="pagination-link" data-snap-scroll-nav-item="first-one-6">6</a>
</li>
<li>
<a href="#first-one-7" class="pagination-link" data-snap-scroll-nav-item="first-one-7">7</a>
</li>
</nav>
</section>In some cases, the appearance or disappearance of a scrollbar can cause that container's contents to jump around. This might be fine if the scrollbar is appearing as a result of the user opting to zoom or resize their browser, but when that's not the case, the jumping can be extra noticeable. If you're noticing this in your scrolling component, consider applying a scrollbar gutter atomic.