Wednesday, December 10th, 2008

Pegs: Automate display: fixed++

Category: CSS

Chris Wetherell (the chap who kicked off Google Reader in his apartment) has posted about Pegs a pattern for having one scrollbar but independent scrolling areas.

It is more than display: fixed in that it can be smart. If you visit the demo you will see it in action. After the first time, click around on the other items such as flipping between sizes of areas. You will see that different areas scroll depending on the config.

This is definitely something that people will be skeptical about. It feels weird. It isn’t what we are used too. The demo app also is jumpy and acts a little strange, but it is interesting to play with these ideas.

This implementation uses jQuery, and you can enjoy some minified source.

Posted by Dion Almaer at 4:16 am

3.5 rating from 31 votes


Comments feed TrackBack URI

I don’t think it feels weird at all, it feels kind of natural to me. Shouldn’t this be a part of browsers instead of interface hackery?

Comment by SchizoDuckie — December 10, 2008

I published something very similar in 2006.

Comment by dallard — December 10, 2008

I think “Long and Long” is where things will get weird, but unfortunately it isn’t in the demo. You’d start losing some control over scrolling specific columns.

Comment by pendensproditor — December 10, 2008

Sucks that it doesn’t degrade well. Doesn’t scroll at all with JavaScript turned off.

Comment by tomh — December 10, 2008

tomh: What do you mean? It scrolls normally without JavaScript.

Comment by MattCoz — December 10, 2008

disaster in ie6

Comment by kazukin — December 10, 2008

Also doesn’t work well in Opera 9.62. I didn’t know what was going on until i tried it in FF.

Comment by ndluthier — December 10, 2008

Cool. I like the demo.
Also, Yahoo uses a similar effect on (watch the ads in the left column as you scroll down)

Comment by WillPeavy — December 10, 2008

This is one of those cases that remind us that web apps are different from desktop apps. Pegged scrolling would feel unnatural in the desktop but it’s very natural in a web page. That’s because we’re used to scroll down a page, lose sight of the (mostly) useless header, keep seeing at least part of the navigation menu and read the most important part of the page (just look at your browser now). The kind of scrolling demonstrated by Chris builds on what we’re used to do and gives us the benefit of keeping the navigation menu in sight.

I didn’t check Chris’ code thoughtfully yet but maybe it’s even possible to keep an horizontal navigation menu in sight and make disappear only the site header above it, e.g.: in the case of Ajaxian, keep the Search, News, Podcasts, etc menu visible at the very top of the page and let disappear only the 50px or so so above it.

Comment by pmontrasio — December 11, 2008

It works even with Opera! …NOT!!!

Comment by mrmass — December 20, 2008

Leave a comment

You must be logged in to post a comment.