Dear Ueno: How can I make scrolling great again?
Dear Ueno is an advice column for people who for some weird reason think we know what we’re doing. Read more about it.
From Tony McKeown:
“Dear Ueno, I love some of the scrolling techniques you use in your case studies. I’d be interested in learning how you do the following: a) Freezing the text on the left whilst you scroll down the large image on the right, and then unfreezing it when the image has been scrolled through. b) Scrolling through images horizontally just by dragging the mouse, without any visible scroll bar or direction buttons.”*
Katie Conforti, front-end developer at Ueno San Francisco, replies:
At Ueno, we take our CSS as seriously as any other part of our stack, it’s an important and powerful part of our arsenal.
Let’s dig into it!
Effect #1: Vertical scrolling
The big player here is the CSS property
Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed.
A few things to note
stickywon’t have an effect without setting a threshold value
Often this will be applied to the
topproperty; this sets the position, relative to the viewport, at which you’d like the sticking to start happening. Depending on the effect you’re looking to create, you can also set the threshold using
bottom; or when horizontal scrolling is available,
stickyelement will be contained to its parent
The dimensions of the parent element will determine when your
stickyelement unsticks, so be sure there is some empty space between the end of your
stickyelement and the end of your parent element; note that
paddingare not “empty.”
- Avoid putting too much content in a
If the content in your
stickyelement is too large to fit in the viewport all at once, your visitors won’t be able to see the end of it until the element becomes unstuck. Account for the variety of devices and screen sizes your visitors might be using.
- Be mindful of browser limitations
◦ IE / Edge 15 and earlier do not support
◦ Safari requires
◦ Can I Use… is a great resource to check if a particular feature of CSS, HTML5, JS, SVG, and more, is supported across browsers.
So you can more easily see what’s going on, and tinker around with the code yourself, I’ve created a simplified version of this section of the Lonely Planet case study on CodePen:
Effect #2: Horizontal scrolling
How to add horizontal scroll
This effect relies heavily on the CSS property
overflow-x: scroll;. Apply this property to a block-level element, placing the content to scroll inside of it. In my CodePen demo, this is the
div with the class
In order for
overflow-x to have an effect, the overflow container must have either a set width (
white-space set to
You can read more about the specifics of the
overflow-x property on MDN web docs.
How to hide the scrollbar
We prevent the scrollbar from showing by straight up hiding it. To achieve this, add a
margin-bottom property, with a negative value, to the overflow container. You will also want to add
padding-bottom, set to the matching positive value, to make sure nothing else at the bottom of your container gets clipped off. The value you choose needs to be big enough to capture the dimension of a scrollbar across a variety of browsers; we went with
30px on ueno.co.
Next introduce a parent element with an
overflow-y: hidden; property; in the demo, this element is the
div using the
clipScrollBar class. This combination allows the dimensions of the content (images or otherwise) to be flexible and responsive. This pattern helps to make the code reusable, and eliminates any reliance on another element in the DOM to cover the scrollbar.
How to enable click and drag
Element reference or query string for the target, where the code should listen for touch or mouse events.
An array that sets the limits of how far we want our element to be able to move on the x-axis.
A function that will be called with the updated x value.
Bonus: How to improve affordance
A scrollbar creates an affordance for how to interact with the content. Now that the scrollbar has been hidden, a different affordance can be created to indicate the content can be clicked and dragged. To do this, add a
cursor: grab; CSS property to the overflow container to change the cursor to a grabby hand (a technical term) when a visitor mouses over that element.
Tools for figuring it out
When you’re teaching yourself, knowing how and where to find answers is empowering. Pulling apart other people’s work is a great way to learn. Here are some of my favorite tools, resources, and techniques, for finding answers and figuring out how something is done.
Built right into most browsers, developer tools allow for a quick look at what’s going on below the surface of a website. The fastest way to access Web Inspector (in WebKit browsers) is typically to right click on an element and choose
Inspect from the menu. In the style pane you can uncheck, or edit values, for properties to quickly determine what is producing the effect you’re interested in, and visualize it’s impact.
For more details on how to enable developer tools in your browser of choice, visit DebugBrowser.com.
Documentation and reference material
- MDN web docs
The Mozilla Developers Network is great resource for reference documents, tutorials, and guides on a variety of web technologies including HTML, CSS, JS, and more.
Home to fantastic development articles with a design bent, often walking through multiple approaches to highlight the pros and cons of each technique.
Community and playground for front-end developers. Built by the creators of CSS-Tricks.
Similar to CodePen, great for sharing specific bits of code in order to work out problems.
Community dev space, focused on collaborative hacking on apps and bots.
- Gist by GitHub
Quickly share snippets of code, ideal for when no preview is required.
Could-based dev environments.
Q & A
Go forth and code!
Thanks for reading. I hope this helps, not only with recreating these specific effects, but also with how to figure out for yourself what’s going on in CSS, and where to learn more. If you find you enjoy working with CSS, stylesheets can get even more powerful with preprocessors; at Ueno, our favorite is Sass.