Setting "scrollTop" for overflowing element via HTML/CSS (without javascript)

Question

Suppose I have the following html:

<div style="width:200px;height:200px;overflow:scroll">
  ...
</div>

If the stuff in this div ends up overflowing, the most popular way to change the scrolling position of this item is to use jQuery.scrollTop(). However, I have a situation where I would like to set the initial scroll position of the div using the source HTML. Is there a way of doing this? All examples I see online for doing this end up using javascript.

One way I tried is to write a scrollTop property on the element, like so:

<div scrollTop=20 style="width:200px;height:200px;overflow:scroll">
  ...
</div>

However, this does not work. Surely, there must be a way to set the initial scrolling position of an overflowing item via HTML/CSS...

Here is a full version of this code that illustrates that it doesn't work- The vertical scrollbar remains at "0": http://jsfiddle.net/gueBZ/1/

Can anyone help me to make it work? Thanks so much for any pointers!

score 2 · Accepted Answer · 2012-02-04 02:37:12Z

2

<div style="width:200px;height:200px;overflow:scroll">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div id="hello">autoscroll here</div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

then open the page as

page.html#hello

this is the only thing you can do, with HTML only

edited Feb 4, 2012 at 2:37

answered Feb 4, 2012 at 2:27

user652649

Sign up to request clarification or add additional context in comments.

6 Comments

drcode Over a year ago

Interesting- I agree that's a partial answer to my question (and a full answer if it is the best possible.) I will see if anyone else has a better answer (i.e. one that just lets you set the scrolltop position in pixels in a more standard way) but otherwise will mark your answer as the solution.

user652649 Over a year ago

with HTML5 you can also try "autofocus" but it works only with input tags... why you want not to use javascript? you can implement the scrolltop="" attribute by yourself

user652649 Over a year ago

@drcode I'm nearly totally sure that this is the only thing you can do with the HTML only (including CSS)

drcode Over a year ago

It's part of a large-ish server-side library I'm putting together that so far is free of javascript. However, if stackoverflow says there is no solution (which seems likely at this point) then I will probably need to use javascript just for this one issue. Thanks for your time/help, Wes.

user652649 Over a year ago

@drcode btw may be cool to have this in html5 w3.org/Bugs/Public/show_bug.cgi?id=15876

|

Collectives™ on Stack Overflow

Setting "scrollTop" for overflowing element via HTML/CSS (without javascript)

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related