3 ms·
The majority of this scrolling implementation is pure CSS. It's reasonably elegant code, even if I'm not sure that the effect is worth pursuing. I think I like
by danShumway 7y ago
The majority of this scrolling implementation is pure CSS. It's reasonably elegant code, even if I'm not sure that the effect is worth pursuing. I think I like this page more as an engineer than I do as a user.
If you disable Javascript, it's a lot more consistent because the Javascript is only there to swap vertical scrolling for horizontal. Without JS it's still horizontal scrolling, but you scroll left/right the same way you would expect to, and for the most part the page just handles it -- it'll even resize correctly as you change the browser height.
The quick, dismissive comment I could give is that I don't think I like this as a user, so the author should just give the entire thing up. But it's kind of interesting, and I can see why someone might want to pursue a strange effect like this, and there might be ways to make it more tolerable. I think overriding vertical scroll controls was a mistake; maybe it's better to lean into the fact that it's horizontal, use pure CSS for the core, and only use Javascript to make horizontal scroll speed a bit faster or add shortcuts or something. Let the browser handle scrolling horizontally.
Cool or not, the effect seems to distract from the content though. Since the CSS is fairly nice and clean, something simple like a button that toggled between horizontal/vertical modes would not require overriding many rules, and would head off a lot of these kinds of comments.
- NetOpWibby 7y agoI was honestly not expecting any comments regarding scrolling but as you've suggested, I think adding a toggle would be beneficial.
- danShumway 7y agoI want to stress, regardless of my lukewarm feelings towards the UX, the engineering side of how this page is implemented is great. It's using a few overlooked properties like CSS columns that get around needing to use JS to dynamically calculate height, and it's using Flexbox to get rid of any weird padding issues. I haven't tested, but I assume this will work in pretty much any modern browser (and even a few older ones like IE11) and degrades wonderfully when Javascript is disabled. It's screenreader accessible, it doesn't require messing with the HTML layout. It's some really pretty CSS.
- NetOpWibby 7y ago:D Thanks Dan!