/    Sign up×
Community /Pin to ProfileBookmark

scrollTop/scrollLeft do not work on hidden divs

Hello,

I have a couple of divs that receive updated content on an AJAX based site.

In one of them I have a horizontal bar with numbers that can be clicked on, and depending on the update the bar can be made to scroll to the left so that some numbers are no longer available (they scroll left out of the div and sometimes scroll back in).

The other one holds messages from the server and looks much like a chat window, I use scrollTop so that the last messages at the bottom of the div are always visible.

These actually work fine in both IE and firefox but only so far as they are visible (actually the first one always works fine in IE). But if the panel where these divs are located is hidden (user has hidden it and is working on something else) the scrollTop/scrollLeft are ineffective. If the user then goes back to those divs there would have been no scrolling since hiding them. Of course if an update comes as you are looking at the divs eventhing gets fixed.

Any ideas? Anyone seen this before?

Thank you
Yiannis

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@konithomimoSep 13.2006 — You cant affect the display of an object that has no display . . .
Copy linkTweet thisAlerts:
@yiannisauthorSep 14.2006 — I am pretty sure that you can. It's not that the object has no display, it's that it is temporarily hidden by either "display: none;" or "visibility: hidden". I have a lot of things being updated while out of view. In fact my messages div gets all the messages and fills up while hidden but the scrollTop does not work and the scroll bar remains at the top instead of the bottom.

I even try to set the scrollTop with setTimeout() after the div comes into view but this did not work either.
×

Success!

Help @yiannis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...