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:

Hi Tony. Although we are using a fair amount of JavaScript hotness on this page (we primarily use React, read more the tech we use, and why, in Birkir’s write up on the Ueno Developer’s Starter Kit), both of the effects that you are curious about rely almost entirely on the strength of CSS.

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

1) Freezing the left panel

The big player here is the CSS property position: sticky;.

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.

MDN web docs: CSS position

A few things to note

  • sticky won’t have an effect without setting a threshold value 
    Often this will be applied to the top property; 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, right or left.
  • A sticky element will be contained to its parent
    The dimensions of the parent element will determine when your sticky element unsticks, so be sure there is some empty space between the end of your sticky element and the end of your parent element; note that margin and padding are not “empty.”
  • Avoid putting too much content in a sticky container 
    If the content in your sticky element 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 sticky
    ◦ Safari requires -webkit- prefix. 
    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

2) Scrolling horizontally, without scrollbars

This effect has three key pieces: a horizontal scroll, a hidden scrollbar, and a click and drag with momentum (spoiler alert, this last one requires JavaScript). You can experiment with a simplified version of this section on CodePen.

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 overflowContainer.

In order for overflow-x to have an effect, the overflow container must have either a set width (width or max-width) or white-space set to nowrap.

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

This effect does rely on some JavaScript. Here we utilize a small library called Impetus.js which enables us to easily add momentum to a click and drag. These are the options we pass to our constructor:

  • source 
    Element reference or query string for the target, where the code should listen for touch or mouse events.
  • bound-x 
    An array that sets the limits of how far we want our element to be able to move on the x-axis.
  • update 
    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.

Web Inspector

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.
  • CSS-Tricks
    Home to fantastic development articles with a design bent, often walking through multiple approaches to highlight the pros and cons of each technique.

Workspaces

  • CodePen
    Community and playground for front-end developers. Built by the creators of CSS-Tricks.
  • JSFiddle
    Similar to CodePen, great for sharing specific bits of code in order to work out problems.
  • Glitch
    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.
  • Cloud9
    Could-based dev environments.

Q & A

  • Stack Overflow
    Wealth of past questions to search, or ask your own.
  • Can I Use
    Great place to confirm whether a technology is supported by browsers.

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.


Katie Conforti is a front-end developer and amateur astronaut, and you can follow her on Twitter. Want to work with her? Check out available positions at Ueno.

* Question edited for brevity and clarity.