Question

Dear all, is there a way to scroll, as in relatively shift the contents of, an element without using javascript, and only using CSS?

If that matters, the element in question has overflow:hidden and white-space: nowrap to make it ‘hide’ some parts of its content. The element is normally scrollable with javascript, but needs to be properly shifted upon initial rendering (and without further interactive scrolling, of course) in case javascript is disabled.

Answer 1

No. Not with CSS directly.

You could simulate it, by wrapping the contents with a div and giving it a margin-top value for the amount of scrolling you want.

(remember to remove it/set it to 0 with javascript when it is enabled)

update
A cool idea is what Jamie, mentions in his answer, if it fits your requirements.

---

update 2

Here is another solution i created out of Jamie’s idea, that needs no frames.

Put an anchor <a name="anchor_name">..</a> at the place you want the scrolling to be and use a

<meta http-equiv="refresh" content="2;url=#anchor_name_here">

to auto-scroll there. (the meta element should go in the head though for (x)html conformance)

example at http://www.jsfiddle.net/gaby/f3CVY/5/

works great in all browsers i tested it (IE, Chrome, FF, Opera, Safari)