Applying for January classes? App/scholarship deadline extended through December 9th. Click here
Search Icon A magnifying glass icon.
Search Icon A magnifying glass icon.
Subject
Admissions

DEGREES

Next Start:
January 6, 2025
Next Start:
January 6, 2025
Explore Graphic Design Degree Courses
Discover Sessions Graphic Design Hub

Professional Certificates

Explore Graphic Design Career Courses

DEGREES

Next Start:
January 6, 2025
Next Start:
January 6, 2025
Explore Web Design Degree Courses
Discover Sessions Web Design Hub

Professional Certificates

Next Start:
January 1, 2025
Explore Web Design Career Courses

DEGREES

Next Start:
January 6, 2025
Explore Digital Media Degree Courses
Discover Sessions Digital Media Hub

Professional Certificates

Explore Digital Media Career Courses

DEGREES

Next Start:
January 6, 2025
Explore Digital Media Degree Courses
Discover Sessions Digital Media Hub
You can deepen your software skills and keep up with the latest Adobe CC updates in our online Digital Arts courses.
Contact Admissions

DEGREES

Next Start:
January 6, 2025
Next Start:
January 6, 2025
Explore Digital Photography Degree Courses
Discover Sessions Digital Photography Hub

DEGREES

Next Start:
January 1, 2025
Explore Fine Arts Degree Courses

DEGREES

Next Start:
January 6, 2025
Next Start:
January 6, 2025
Explore Illustration Degree Courses
Discover Sessions Illustration Hub

Professional Certificates

Next Start:
January 1, 2025
Explore Illustration Career Courses

DEGREES

Explore Advertising & Marketing Degree Courses
Discover Sessions Advertising & Marketing Hub

Professional Certificates

Explore Advertising and Marketing Career Courses

CERTIFICATES

Next Start:
January 1, 2025
Next Start:
January 1, 2025
Explore Sessions Career Courses
Professional Cert PLUS
Next Start:
January 1, 2025
Next Start:
January 6, 2025
Next Start:
January 6, 2025
Next Start:
January 6, 2025
Explore Sessions Bachelor's Degrees
Next Start:
January 6, 2025
Next Start:
January 6, 2025

WWW… Wednesday! CSS Scroll Snap

by Taylor Slattery | July 31, 2019

CSS Scroll Snap - Web Design

For an increasing number of people, smartphones have become their device of choice for browsing the web. The difference in screen orientation and touch-based interface has necessitated that the way we design websites change on a fundamental level. First introduced in 2016, CSS Scroll Snap is a feature many of us may be more familiar with than we realize. Similar to the way home screens on smartphones smoothly swipe side to side to access additional apps, Scroll Snap designates points along a web page to snap to, ensuring that the page’s content is displayed in its intended way.

For those of us who spend a great deal of time carefully preparing the content for our sites, Scroll Snap offers another degree of control. Its ability to work across different browsers and within a responsive page design helps to create a similar browsing experience regardless of device.

On a basic level, Scroll Snap functions by snapping items to set points within a container. In the examples below, the snap points are represented as red dotted lines, and the containers are outlined in green. Snap points have a couple of different orientations. First, they can be set to a position relative to the container, as seen in the first example below. They can also be set to a position relative to the items themselves, seen in the second example below. It sounds simple enough. So when should you use it?

vertical-scroll-snap

horizontal-scroll-lock

If images are your primary form of content, Scroll Snap will prove particularly useful. Strategic placement of the snap point will prevent the images on your site from being only partially visible. This makes it a great choice for use in any sort of image gallery, like carousels or grids. It is also well suited for some types of text, like captions below images.

Larger amounts of text can be problematic. If the body of text doesn’t fit cleanly within the defined container, Scroll Snap might make certain parts of the copy inaccessible. In the example below, because the snap is configured to bring the top of the images to the snap point, part of the text has become impossible to read.

scroll-lock-incorrect-spacing

Therein lies the main problem with Scroll Snap. When the content is larger than the container, managing snap points can become difficult. If you use only a single parameter, parts of your content might be completely inaccessible. In the example below, we can see that the portion of the image that bleeds out of the container will be skipped over as the scroll snaps to the top of the next image. This is problematic for both images and text. For that reason, Scroll Snap is not particularly well suited for articles, where individual reading preferences might not be best served by a single snap point. Some might prefer to read pages from top to bottom, like a book, while others might constantly scroll to keep their current line at the top of the screen.

Ultimately, by using CSS Scroll Snap, you are taking a degree of control away from the user. CSS Scroll Snap can make for an impressive website experience, but it may not be the best choice for your particular type of content. As always, content is king, so carefully consider your content and audience when designing your site.

 

Taylor is a concept artist, graphic designer, illustrator, and Design Lead at Weirdsleep, a channel for visual identity and social media content. Read more articles by Taylor.

 

This blog is powered by Sessions College, the leading online school of visual arts.

©2024 Sessions College for Professional Design  All rights reserved

Terms & Conditions       Privacy Policy