set scrollTop and scrollLeft without javascript

Question

I have a question about the scrollTop and scrollLeft properties. I would like to set these properties in my div without using JavaScript (jquery). Is this possible? My problem is, I have a program which interprets the HTML code and the divs which I scrolled have the value zero when the program interpret the code. The program can't read the scrollTop or scrollLeft value. Exists a HTML-tag like:

<div scrollLeft="300" scrollTop="200"></div>

Answer 1

I'm afraid that this is not possible using CSS/HTML only.

Edit [05.01.2012] - A possible solution

I created a solution that works in the following browsers:

• Firefox 4+
• Safari 5+
• Chrome 6+
• Opera 11+
• IE 10+
• Android 2.3+

It's really a bit hacky, so see whether you would use it or not. :)

A little explanation

I used the HTML5 attribute autofocus on an <input>-field. As this will focus the input, it has to get it into the viewport. Therefor it will scroll to the given position. To get rid of the highlighted outline and to not see the input at all, you have to set some styles. But this still forced Safari to have one blinking pixel, so I did the trick with the span, that acts like an overlay. Note that you can't simply use display: none as this won't trigger the autofocus (only tested this in Safari).

Demo

Try before buy

The demo will run in Safari and Chrome only. IE and Firefox seem to not fire autofocus in an <iframe>.

CSS

div.outer {
    height: 100px;
    width: 100px;
    overflow: auto;
}

div.inner {
    position: relative;
    height: 500px;
    width: 500px;
}

div.inner > input {
    width: 1px;
    height:1px;
    position: absolute;
    z-index: 0;
    top: 300px;
    left: 200px;
    border:0;
    outline:0;
}

div.inner > span {
    width: 1px;
    height:1px;
    position: absolute;
    z-index: 1;
    top: 300px;
    left: 200px;
    background: white;
}

HTML

<div class="outer">  
    <div class="inner">
        <input type="text" autofocus></input>
        <span></span>
    </div>
</div>