可滚动区域html

时间:2010-02-18 15:48:18

标签: html listbox

在HTML中制作可滚动列表区域有哪些选项?

那么要创建类似列表框的区域吗?

DIV是否有溢出:滚动最佳方法?

或者iframe更好吗?

有没有更好的新方法呢?

希望显示使用AJAX / Comet方法响应服务器“推送”更改的对象列表更新的HTML区域,并在列表更新时维护用户的滚动位置。这可以在没有“跳跃”列表的情况下完成,如果是,怎么做?

修改

我现在已经完成了一个基本的DIV解决方案。基本上使用overflow:auto(而不是overflow:scroll)似乎是静态列表和一体化更新列表的好主意。

又过了一周,我想我会尝试用户'egarcia'谈论的一些动画创意,然后我会勾选答案。

我目前正在使用当前版本的Firefox(在Windows XP和Linux上)和Internet Explorer(在Windows XP中)进行原型设计。

我正在做的DIV工作只是一个更大的博客项目的一小部分。

3 个答案:

答案 0 :(得分:1)

据我所知,div是解决此类问题的可靠解决方案。 你永远不应该使用iframe(几乎从不)。

答案 1 :(得分:1)

带溢出的DIV:滚动是您的最佳选择。将ul放入其中,li元素应填入ul

我不确定你的“跳跃列表”是什么意思。如果你的意思是你想让列表“平稳地增长”而不是突然有很多项“突然出现”那么你必须使用javascript。

最简单的解决方案是对新项目应用“淡入”效果。 Prototype.js和Jquery具有内置的“淡入”效果。这仍然会使你的滚动条“跳跃” - 当新元素到达时它会非常快地改变大小。

一个更复杂的选项,但更好看,是在隐藏的div上制作AJAX刷新数据。刷新数据后,您可以使用该回调以“平滑”的方式“更新”“可见”div - 逐个添加所有li项,或使用另一个平滑增长的内部div - 但您将必须在javascript中计算高度。

答案 2 :(得分:1)

我认为你应该能够将div的scrollTop属性放入你的AJAX调用中,然后在你的回调函数中设置它,这样div的滚动条就会随你移动。请参阅Mozilla关于此属性的文档:https://developer.mozilla.org/En/DOM/Element.scrollTop。 (一个iFrame看起来有点矫枉过正,div应该有效。)