Comments on: Scrolling, Scrolling, Scrolling

By: Paul OB

Paul OB — Tue, 02 Feb 2010 07:49:20 +0000

@Brian: This should work on the iphone as it is. You just have to remember that the iphone needs a 2 finger scroll for any elements that should have a scroll bar.

Of course the iphone doesn’t show the scrollbar which makes it hard for users to realise they need to use a 2 finger scroll and indeed most don’t know about it anyway.

By: Brian

Brian — Sun, 31 Jan 2010 22:46:37 +0000

Is there a way to make this work on mobile browsers such as Safari for the iPhone?

By: Paul OB

Paul OB — Mon, 30 Mar 2009 08:42:24 +0000

Hi Rembrandt,

The width of the scrolling box is a fluid width and is not defined anywhere. That was the main point of the demo

It will be as wide as the content that you specify. The same applies to the height.

I only gave a width to the “parent” container to provide the visual effects I wanted. Without a width the element would be viewport (or parent container) width what ever that may be.

It works fine without a width so you must mean something else as the site you linked to doesn’t seem to have anythng in common with the demo unless I’m misunderstanding something

By: Rembrant

Rembrant — Mon, 30 Mar 2009 03:36:08 +0000

Dear Paul,

Thank you for your great tutorial! It’s been a great help to me and a very good read in general.

I was trying it out myself but I stumbled upon some strange behaviour if you insert this concept into a fully fluid layout. Safari Firefox and IE just jumble up the page completely, each in it’s own way.

Do you think there would be a solution to use exactly this concept but have the heights of the wrapper, ul, il and img be fluid (so, defined in % of each other) and all widths, except for the wrapper, be undefined? (so to allow fully dynamic database content).

It seems like this could be a great solution to make a horizontally scrolling image gallery/creative portfolio that can adapt to any screen size (I’m thinking mobile devices here for example) and follow along the w3c guidelines. If only I could figure out how to do this without scrambling the whole layout.

e.g. This site ( http://www.landonmetz.com/ ) uses the concept that I have in mind except that:
1. It uses tables
2. The images aren’t fluid

Yours sincerely,

- Rembrant

By: Paul OB

Paul OB — Tue, 06 Jan 2009 13:01:43 +0000

Yes Duncan77 that was it Sorry I didn’t make it clearer.

By: Duncan77

Duncan77 — Mon, 05 Jan 2009 23:57:08 +0000

Sorry – just worked it out: it’s the display: table-row and display: table-cell rules.

Duncan77

By: Duncan77

Duncan77 — Mon, 05 Jan 2009 21:48:06 +0000

… and what was the critical fix needed to get IE8 to work? I’ve looked through the two source files and it wasn’t obvious.

Duncan77

By: Craig

Craig — Wed, 29 Oct 2008 21:27:07 +0000

I’ve just spent the last 24 hours trying to do this and i must have looked at every single possible layout, and then I found this page . awesome, absolutely awesome. If it’s ok with you im going to use the layout in my site but will give credit to you.

Cheers m8

By: Paul OB

Paul OB — Thu, 16 Oct 2008 21:51:59 +0000

I just noticed that a slight change is need for IE8 to work so I have updated the example here to include the ie8 fix.

http://www.pmob.co.uk/search-this/scroll12.htm

By: raza

raza — Sat, 04 Oct 2008 00:55:44 +0000

dude.

i was going to find and kill each developer of ie6 personally.

you made my day.

many many thanks.

-raza

By: Patrick Burt

Patrick Burt — Thu, 27 Mar 2008 14:10:30 +0000

Looks cool, very interesting. Very good alternative to say something like Flash..

By: Golgotha

Golgotha — Thu, 27 Mar 2008 13:46:55 +0000

That’s the type of CSS stuff that can drive you mad. It’s like WTF…

That may be a good article to write Paul, CSS stuff that makes you think WTF

By: Paul OB

Paul OB — Thu, 27 Mar 2008 12:03:20 +0000

@Mauricio – It seems that removing that extra wrapper has resulted in the second image dropping down in Firefox on first page visit as mentioned earlier in the article. Therefore it looks like the extra wrapper is needed to stabilize Firefox.:(

By: Paul OB

Paul OB — Thu, 27 Mar 2008 09:46:21 +0000

Thanks Mark

@Mauricio -Thanks and yes you are correct we could lose the element named wrap. It was only in the code for the earlier example where I gave the UL a width to force the scrollbar on .wrap

Here is an example with .wrap removed(although box model hacks will now be needed for IE5.x of course).

http://www.pmob.co.uk/search-this/scroll12.htm

Thanks for the comments

By: Golgotha

Golgotha — Thu, 27 Mar 2008 04:00:13 +0000

I like the fade away PNGs – nice touch.

The only times I have seen this before in Firefox is when images (or dynamic content) are used and the images don’t have their width and height attributes in the HTML.

I have experienced that too and it pisses me off…

Good tutorial Paul.