CSS Scroll Position After Javascript "reload()"

[Raffi]

Hi,

I have an application screen with a CSS scroll area. Users click links
in the scroll area which open small popup windows to enter data. When
the data is submitted, the popup reloads the opener to update the page
and closes itself. However when the parent page is updated, the div
scrolls back to the top. Is there a way to have CSS remember the
vertical scroll position and go back to it when the page is reloaded?
Similar to document.body.scrollTop in Javascript. Here's the relevant
portion of the code:

<STYLE TYPE="text/css">
div.scroll
{
height: 400px;
width: 960px;
overflow: auto;
border: 1px solid #0000ff;
background-color: #77ddcc;
padding: 8px;
}
</STYLE>

.............

<div class="scroll">
...application data...
...application data...
...application data...
...application data...
</div>

 

[Ben C]

Hi,

I have an application screen with a CSS scroll area. Users click links
in the scroll area which open small popup windows to enter data. When
the data is submitted, the popup reloads the opener to update the page
and closes itself. However when the parent page is updated, the div
scrolls back to the top. Is there a way to have CSS remember the
vertical scroll position and go back to it when the page is reloaded?
Similar to document.body.scrollTop in Javascript.

I don't think there is a CSS-only way.

You can do this with fragment urls if it's the main document we're
scrolling. If somewhere near the link they clicked you put

<a name="foo"></a>

And then have the popup reload the page using url#foo. They won't be
exactly where they were, but somewhere near it. Might not work in all
browsers.

But in your case, we're talking about a div with overflow: scroll. You
can experiment with fragments, I don't know if that will work.

Can you even get the scroll offset with JS for elements other than body?

 

[Raffi]

I don't think there is a CSS-only way.

You can do this with fragment urls if it's the main document we're
scrolling. If somewhere near the link they clicked you put

<a name="foo"></a>

And then have the popup reload the page using url#foo. They won't be
exactly where they were, but somewhere near it. Might not work in all
browsers.

But in your case, we're talking about a div with overflow: scroll. You
can experiment with fragments, I don't know if that will work.

Can you even get the scroll offset with JS for elements other than body?

Thanks, I'll try that. Unfortunately JS scroll seems to apply to the
body of the page only.

Raffi