This is an interesting read on the current state of scrollbars and how to control their behavior across operating systems and browsers. The post also highlights a bunch of stuff I didn’t know about, like
Element.scrollIntoView() and the
scroll-behavior CSS property.
My favorite part of all though? It has to be this bit:
In our opinion, Progressive Enhancement is the best approach to follow when implementing non-trivial scrolling in your web projects.
Make sure you can provide the best possible minimal, but universally supported UX, and then improve with modern browser features in mind.
Speaking of the cross-browser behavior of scrollbars, Louis Hoebregts also has a new post that notes how browsers do not include the scrollbar when dealing with
vw units and he provides a nice way of handling it with CSS custom properties.
Over on the MediaTemple blog, I show you how you can make a pretty decent little carousel with just a few lines of code. Here's the entire premise:
Every time a carousel is mentioned in a blog post, it’s a requirement to mention that… say it with me now:
You probably shouldn’t use a carousel.
Jared Smith made a microsite just for it, with research and rhetoric supporting the idea that you shouldn’t use them. Most of that information focuses on the fact that there is low engagement with the non-first-slide(s).
I’m not here to argue with data, but I would argue with the dogmatism of “never user them, EVER.” Swiping on mobile is an extremely common action, and what is a swipe that reveals more content? Basically a carousel. What about a carousel that doesn’t demand much interaction? Perhaps just a way to swipe through an artist’s recent work. This seems like a perfectly nice way to do that, so long as the UI is clear and accessibility is implemented.
What I am here to talk about is the situation where you do want a carousel and to resist the temptation to reach for a wheelbarrow full of code to do so. I guarantee there are people who’ve picked an entire CMS because they thought they needed it to make a carousel. No shame. We’re all learning.
It's not just my idea, I link out to all the smart people who have tackled this subject before throughout the years and made similarly simple and awesome demos.
The new CSS Scroll Snap Points spec promises to help, allowing for this kind of behavior using very few lines of CSS.
As happens with very new web tech, this spec has changed over time. There is "old" and "new" properties and values. It's promising though, as support has shot up quickly. I'll teach you how to get the widest support in this in-between stage.
Guil Hernandez introduces how easy sliders (with nice UX) will be with very simple HTML and CSS' brand new
scroll-snap-* properties. CSS is moving fairly fast these days, with features like this moving from "never heard of it" to:
... browser support for CSS scroll snap points is limited to IE10+ and Firefox 39+. But it looks like Safari 9 will include support, and you can enable scroll snap points in Chrome Canary.
before you know it. The Chrome support means it will trickle to Opera and Android, and the Safari support means it will trickle to iOS, so pretty solid support across the board soon.
The newly-introduced CSS “snap points” properties could make it a whole lot easier to create CSS-only scroll effects (once browser support catches up). This post from Sergey Gospodarets' blog includes demos of snappy scrolling for image galleries and full-page vertical scrolling.
Scroll snapping is used widely for a better separation of the provided content (vertical full height pages) or, for example, to emulate galleries behavior... Can you imagine how easy would be creating such effects using CSS only?
The full specification is worth a review.
By now, any article about carousels should come with the disclaimer: You may not need a carousel. Carousels are easily abused. Kyle Peatt has more details on the carousel controversy.
Part of the blame can be put on the user experience of carousel plugins themselves. Scrolling through a carousel is less satisfying and more awkward that simply scrolling down a page. Basically, you can't flick through them. Third-party libraries should at least be as useful as native behavior.
Kevin Foley explains how to build a swipeable gallery on touch devices.