scrollable regions html

What are the options for making scrollable list regions in HTML?

So to create listbox-like areas?

Is DIV with overflow:scroll the best approach?

开发者_开发百科

Or is iframe better?

Are there any better newer ways of doing this?

Would like to show region of HTML which updates with a list of objects in response to "push" changes from server using AJAX/Comet approach, and maintain user's scroll position when list updates. Can this be done without the list "jumping", and if so, how?

EDIT

I've done a basic DIV solution now. Basically using overflow:auto (as opposed to overflow:scroll) seems to be a good idea for static lists, and all-in-one-go updated lists.

Another week and I reckon I'll have got round to trying some of the animation ideas user 'egarcia' is talking about, and then I'll tick an answer.

I am prototyping in current versions of Firefox (on Windows XP and Linux) and Internet Explorer (in Windows XP) at the moment.

The DIV work I'm doing is just a small part of a somewhat larger blogging project.

---

From what i know, div is a solid solution for such a problem. You should never user an iframe(almost never).

---

DIV with overflow:scroll is your best option. Put your ul inside it, and the li elements should be populated inside the ul.

I'm not sure what you mean by "list jumping". If you mean that you want to make the list "grow smoothly" instead of having lots of items "popping up" suddenly then you must use javascript.

The easiest solution would be to apply a "fade in" effect to the new items. Prototype.js and Jquery have built-in "fade in" effects. This will still make your scrollbar "jumpy" - it will change size very fast when new elements arrive.

A more complicated option, but a bit better looking, is to make the AJAX refresh data on a hidden div. When the data is refreshed, you use that callback to "update" the "visible" div in a smooth way - either adding all the li items one by one, or using another internal div that grows smoothly - but you will have to calculate heights in javascript.

---

I think you should be able to get the scrollTop property of the div going into your AJAX call and then set it in your callback function, so that the div's scroll bars move as you'd like. See Mozilla's doc on this property: https://developer.mozilla.org/En/DOM/Element.scrollTop. (An iFrame seems like overkill, a div should work.)