🏠

About this demo

This demo features scrollers that show shadows to indicate that they are scrollable. The indicators are only shown when the scroller is actually scrollable.

The Code / Explanation

Scroll Shadows

The shadows are injected onto the .container using generated content. The shadow itself is created using a gradient.

.container::before,
.container::after {
	content: '';
	display: block;
	position: sticky;
	left: 0em;
	right: 0em;
	height: 0.75rem;
}

.container::before {
	top: 0;
	background: radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / 0.25), rgb(0 0 0 / 0));
}

.container::after {
	bottom: 0;
	background: radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / 0.25), rgb(0 0 0 / 0));
}

The shadows their opacity is animated from 0 to 1 as you scroll the .container

@keyframes reveal {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.container {
	overflow-y: auto;
	scroll-timeline: --scroll-timeline y;
}

.container::before,
.container::after {
	animation-name: reveal;
	animation-timeline: --scroll-timeline;
	animation-fill-mode: both;
}

The animation-range for the ::before pseudo is set to the first 1em scrolled in .container. For the ::after pseudo it is set to the last 1em.

.container::before {
	animation-range: 1em 2em;
}

.container::after {
	animation-direction: reverse;
	animation-range: calc(100% - 2em) calc(100% - 1em);
}

Scroller Detection

Because Scroll-Driven Animations are only active when there is scrollable overflow, it is possible to use them as a mechanism to detect if an element can scroll or not. Mix in a Space Toggle or a Style Query, and you’ve got all you need to selectively style an element based on it being scrollable or not.

This technique is described in detail in https://brm.us/css-can-scroll.

For this demo, this code is used to toggle the visibility of the shadows. It reuses the --scroll-timeline timeline from the .container:

@keyframes detect-scroll {
	from,
	to {
		--can-scroll: ;
	}
}

.container {
	animation: detect-scroll;
	animation-timeline: --scroll-timeline;
	animation-fill-mode: none;
}

.container::before,
.container::after {
	--visibility-if-can-scroll: var(--can-scroll) visible;
	--visibility-if-cant-scroll: hidden;
	visibility: var(--visibility-if-can-scroll, var(--visibility-if-cant-scroll));
}

⚠️ Your browser does not support Scroll-driven Animations. Please use Chrome 115 or newer.

Scrollable Container ↓

CSS, short for Cascading Style Sheets, is a programming language that is used to describe the presentation or visual layout of a document written in HTML. It acts as a styling tool and enables web developers to control the appearance of their websites or web pages by specifying how different elements should be displayed on the screen. CSS allows designers to define various aspects such as font styles, colors, spacing between elements, background images, and much more.

The term "cascading" in CSS refers to its ability to apply multiple stylesheets simultaneously and prioritize them based on their importance or specificity. This feature allows developers to create consistent designs across multiple web pages by defining common styles in an external stylesheet which can then be linked to all relevant HTML documents. Additionally, CSS makes it easy to update the design of an entire website by simply modifying one central stylesheet rather than having to manually edit each individual webpage.

CSS can be applied directly within an HTML document using inline stylesheets or internally through embedded stylesheets within the head section of a page. However, it is considered best practice and more efficient from both maintenance and performance perspectives to use external style sheets stored separately in .css files which are then referenced within HTML documents.

One important concept in CSS is selectors. Selectors allow you to target specific elements within your HTML markup so that you can apply different styles only where needed. Selectors can target tags (e.g., p, div), classes (e.g., .header), IDs (e.g., #main), attributes (e.g., [type="submit"]), pseudo-classes (e.g., :hover) and many other properties of DOM elements.

Overall, CSS plays a crucial role in modern web development as it provides great flexibility and control over how content looks on websites. By separating style from structure with this powerful language, developers are able to create visually appealing websites while maintaining clean code that adheres to best practices for web accessibility and user experience.

Non-scrollable Container ↓

CSS, short for Cascading Style Sheets. The content of this box is short as well.