In a guest post, Pieter Biesemans demonstrates a clever trick he devised to force straight CSS to do something it isn’t designed for: horizontal scrolling. The gist of the trick is to change the orientation of native HTML elements using transforms and hiding overflows so that what CSS believes to be a vertical scroll is presented to the user as a horizontal scroll.

If you use this trick, you will be able to place items out of vew past the right or left edges of the screen. You reveal the hidden items using a horizontal scroll bar. Well, it’s actually a vertical scroll bar. But it looks and acts like a horizontal scroll bar. He has shown us how to do it. If you want it pretty, you’re on your own. Or you can call me.

The web is a rather vertical place. You read a web site like you read a physical page: left to right, top to bottom. But sometimes, you want to step away from the verticality of it all and do something crazy: make a horizontal list. Or even crazier, a horizontal site!

Pin It on Pinterest