прокручиваемые области html

Question

Каковы варианты создания областей прокручиваемого списка в HTML?

Итак, чтобы создать области, похожие на список?

Является ли DIV с переливом: прокрутите лучший подход?

Или лучше iframe?

Есть ли какие-либо более новые способы сделать это?

Хотел бы показать область HTML, которая обновляет список объектов в ответ на «push» изменения с сервера с использованием подхода AJAX/Comet и поддерживает положение прокрутки пользователя при обновлении списка. Можно ли это сделать без списка «прыжки», и если да, то как?

EDIT

Я сделал основное решение DIV в настоящее время. В основном использование overflow: auto (в отличие от переполнения: прокрутка), по-видимому, является хорошей идеей для статических списков и обновленных списков «все в одном».

Еще одна неделя, и я полагаю, что мне придется попробовать некоторые из идей анимации, о которых говорит пользователь egarcia, а затем я поставлю галочку.

Я сейчас прототипирую текущие версии Firefox (в Windows XP и Linux) и Internet Explorer (в Windows XP).

Работа DIV, которую я выполняю, является лишь небольшой частью более крупного проекта по ведению блога.

Answer 1

Из того, что я знаю, div является прочным решением для такой проблемы. Вы никогда не должны использовать iframe (почти никогда).

Answer 2

DIV с переливом: прокрутка - ваш лучший вариант. Поместите свой ul внутрь, а элементы li должны быть заполнены внутри ul.

Я не уверен, что вы подразумеваете под «списком прыжков». Если вы имеете в виду, что хотите сделать список «плавным», вместо того, чтобы внезапно появилось много предметов, вы должны использовать javascript.

Простейшим решением было бы применить эффект «затухания» к новым элементам. Prototype.js и JQuery имеют встроенные эффекты «затухания». Это все равно сделает вашу полосу прокрутки «нервной» - она ​​очень быстро изменится, когда появятся новые элементы.

Более сложный вариант, но немного лучше, заключается в том, чтобы обновить данные AJAX на скрытом div. Когда данные обновляются, вы используете этот обратный вызов для «обновления» «видимого» div плавным способом - либо добавлением всех элементов li по одному, либо с использованием другого внутреннего div, который растет гладко, - но вам нужно будет рассчитать высоты в javascript.

Answer 3

Я думаю, вы должны получить свойство scrollTop div, входящего в ваш вызов AJAX, а затем установить его в своей функции обратного вызова, чтобы полосы прокрутки div перемещались так, как вам хотелось бы. См. Документ Mozilla по этому свойству: https://developer.mozilla.org/En/DOM/Element.scrollTop. (An iFrame кажется излишним, div должен работать.)