spaceninja + scroll   23

Two Browsers Walked Into a Scrollbar
The scrollbar is a humble but productive mechanism that operates as the primary means through which one can traverse a document. But that’s not all a scrollbar can do! This modest workhorse also provides a meaningful hint at how long the document is, pulling double duty as a document progress bar too.

The scrollbar is under attack. Scrolljacking hijacks the default scrolling behavior, breaking the implied contract between document length and scrollbar height.
fridayfrontend  cssbasics  css  html  scroll  scrollbars 
3 days ago by spaceninja
Need to scroll to the top of the page?
Perhaps the easiest way to offer that to the user is a link that targets an ID on the <html> element. So like...
fridayfrontend  cssbasics  html  scroll  accessibility 
10 days ago by spaceninja
Prevent Page Scrolling When a Modal is Open
Please stop me if you've heard this one before. You open a modal, scroll through it, close it, and wind up somewhere else on the page than you were when you opened the modal.

That's because modals are elements on a page just like any other. It may stay in place (assuming that's what it's meant to do) but the rest of page continues to behave as normal.

Sometimes this is a non-issue, like screens that are the exact height of the viewport. Anything else, though, we're looking at Scroll City. The good news is that we can prevent that with a sprinkle of CSS (and JavaScript) trickery.
fridayfrontend  css  javascript  cssbasics  modals  scroll 
june 2019 by spaceninja
Scroll animations
In this tutorial we’ll learn how to make use of the requestAnimationFrame as well as Intersection Observer methods to detect when elements are within the viewport of the browser. We’ll introduce a new will-change property and use that to make sure our animations are smooth, and we’ll put these together with some transitions to create animations that are triggered on scroll.
fridayfrontend  cssbasics  animation  requestanimationframe  intersection-observer  will-change  transitions  scroll 
may 2019 by spaceninja
Implementing a pin-to-bottom scrolling element with only CSS
Have you ever tried implementing a scrollable element where new content is being added and you want to pin the user to the bottom? It’s not trival to do correctly. I recently worked on a new CSS feature called ‘scroll anchoring’ that shipped in Firefox 66. While implementing this feature, we discovered that scroll anchoring can be used to create a pin-to-bottom scrolling element without any Javascript. It’s a neat trick, so I thought I’d post the snippet here and explain how it works.
fridayfrontend  css  overflow-anchor  sticky  scroll 
april 2019 by spaceninja
Fixed Headers, On-Page Links, and Overlapping Content, Oh My!
Let's take a basic on-page link. When clicked, the browser will scroll itself to the element with that ID. But as soon as `position: fixed;` came into play, it became a bit of an issue. The browser will still jump to bring the newly targeted element into view, but that element may be obscured by a fixed position element, which is pretty bad UX.
fridayfrontend  cssbasics  css  html  links  fixed  scroll  scroll-padding  scroll-margin 
april 2019 by spaceninja
Downsides of Smooth Scrolling
I can see not being able to adjust timing being a downside, but that wasn't what made me ditch smooth scrolling. The thing that seemed to frustrate a ton of people was on-page search. It's one thing to click a link and get zoomed to some header (that feels sorta good) but it's another when you're trying to quickly pop through matches when you do a Find on the page. People found the scrolling between matches slow and frustrating. I agreed.
fridayfrontend  css  cssbasics  scroll  scroll-behavior 
march 2019 by spaceninja
Combining position: sticky; with overflow: scroll;
Say we want an overflowing table of columns and rows with sticky headings on a page. We want the headings to stick while scrolling on the document window, and we want to be able to scroll horizontally within the overflowing container.

When working with overflows you might find that your sticky element isn’t so sticky after all, which may cause some frustration. The browser doesn’t seem to be respecting position: sticky; once we add overflow to the mix.
fridayfrontend  css  cssbasics  position  sticky  overflow  scroll 
march 2019 by spaceninja
Building a modern carousel with CSS scroll snap, smooth scrolling, and pinch-zoom | Read the Tea Leaves
Come on, it’s 2019. Isn’t there a decent way to build a carousel with native browser APIs? As it turns out, there is. My carousel implementation uses a few simple building blocks: 1) CSS scroll snap. 2) scrollTo() with smooth behavior. 3) The <pinch-zoom> custom element.
fridayfrontend  css  javascript  carousel  scroll-snap  scroll  scroll-behavior  scrollTo  pinch-zoom 
february 2019 by spaceninja
Applying Styles Based on the User Scroll Position with Smart CSS
By mapping the current scroll offset to an attribute on the html element we can style elements on the page based on the current scroll position. We can use this to build, for example, a floating navigation component.
fridayfrontend  css  javascript  scroll 
february 2019 by spaceninja
Stop building websites with infinite scroll!
In this article, we will explain why you need to stop building websites with infinite scroll. TL;DR: While infinite scroll does provide a solution in some cases, it can be less than ideal for users.
design  scroll  infinite  accessibility 
october 2018 by spaceninja
Scroll Bouncing On Your Websites
This article describes the effect of scroll bouncing and how it works on different web browsers. It contains reviews of several different solutions that are suggested on the web that can be used to prevent scroll bouncing. The CSS property, overscroll-behavior, which was implemented in Chrome on December 2017 and in Firefox on March 2018, is also described in this article. A good understanding of this effect is very helpful for building or designing any website that has fixed elements.
fridayfrontend  css  scroll  position  fixed  overscroll-behavior  mobile  touch 
august 2018 by spaceninja
Practical CSS Scroll Snapping
CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling. …If done thoughtfully, scroll snapping can be a useful design tool. CSS snap points allow you to hook into the browser’s native scrolling interaction, so your interface feel seamless and smooth.
fridayfrontend  css  scroll  scroll-snap 
august 2018 by spaceninja
Well-Controlled Scrolling with CSS Scroll Snap
CSS Scroll Snap feature allows web developers to create well-controlled scroll experiences by declaring scroll snapping positions. Paginated articles and image carousels are two commonly used examples of this. CSS Scroll Snap provides an easy to use and consistent API for building these popular UX patterns and Chrome is shipping a high fidelity and fast implementation of it in version 69.
fridayfrontend  css  scroll-snap  scroll 
august 2018 by spaceninja
Easier scrollytelling with position sticky
One of the biggest implementation pains with scrollytelling is the sticky graphic pattern, whereby the graphic scrolls into view, becomes “stuck” for a duration of steps, then exits and “unsticks” when the steps conclude. This post will focus on the easiest solution we’ve come up with yet: offloading the sticky complexity to CSS, using position: sticky.
css  cssbasics  sticky  scroll  javascript  fridayfrontend 
june 2018 by spaceninja
Scroll to the future
Everything you always wanted to know about implementing scrolling but were afraid to ask. We have scrolled to the bottom of modern web specifications to take you on a whirlwind tour of latest CSS and JavaScript features that make navigating around a single page smooth, beautiful and less resource-hungry.
css  cssbasics  scroll  scrollbars  javascript  html  fridayfrontend 
april 2018 by spaceninja
Your Interactive Makes Me Sick
Given all the work that goes into a powerful piece of journalism—research, interviews, writing, fact-checking, editing, design, coding, testing—is it really in our best interests to end up with a finished product that some people literally can’t bear to scroll through? Taking the time to look at each element from an accessibility standpoint, and ensuring that users can control their own level of engagement with a piece, will make your stories stronger and available to a wider audience of readers.
fridayfrontend  animation  design  accessibility  scroll  reduced-motion 
march 2018 by spaceninja
A horizontal scrolling navigation pattern for touch and mouse with moving current indicator
So, the task in this post is to create a simple scrollable panel for touch, augmented with click and drag functionality for mouse input, along with direction overflow indicators.
fridayfrontend  css  navigation  javascript  scroll  horizontal  overflow 
march 2017 by spaceninja
Preventing body scroll for modals in iOS
"iOS doesn’t prevent users from scrolling past the modal if there is content that exceeds the viewport height, despite you adding that condition to the CSS."
fridayfrontend  css  modular  scroll  ios 
september 2016 by spaceninja
CSS Scroll Snap Points
We can control the scrolling behavior of a scroll container by defining “snap points” on the x and y axis. With snap points, a scroll container will snap to a point in the content after a user scrolls vertically or horizontally.
fridayfrontend  css  scroll  snap  scroll-snap-points  scroll-snap 
august 2016 by spaceninja
Pure CSS scrolling shadows with background-attachment: local | Lea Verou
Fantastic technique for adding a dropshadow in an element with content scrolled out of the viewable area.
css  drop-shadow  gradients  backgrounds  shadows  scroll  fridayfrontend 
april 2016 by spaceninja
stroll.js - CSS3 Scroll Effects
A collection of scrolling CSS effects, useful for styling lists.
lists  css  scroll  javascript 
july 2014 by spaceninja
Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user's scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling up.
javascript  jquery  plugins  headers  pinned  scroll 
february 2014 by spaceninja

Copy this bookmark: