容器大小内容大

时间:2011-02-23 14:40:05

标签: javascript jquery html slider

我经历了很多帖子,找不到解决方案。 (我在this post遇到了类似的问题,但我与我的确切情况无关。)

问题:我必须在屏幕上显示一个大型数据表(超过30列)。我的挑战是 - 客户端不喜欢任何意思的水平滚动条。

我正在考虑将表拆分成碎片并使用像Jquery这样的简单滑块:“serialScroll”或“ContentSlider”。但是,这是另一个挑战:对于508合规性,我的表需要是一个表而不是在不同的幻灯片中拆分多个表。

我正在想象我需要在“大桌子”之上设置一个“取景器”div,并且控件可以将表格的左右移动http://img202.imageshack.us/i/tableviewfinderidea.jpg/

我的问题是:

  • 那里有JS或Jquery解决方案吗? (我认真地搜了两个星期而没有任何运气。)

  • 还有其他推荐吗?

1 个答案:

答案 0 :(得分:1)

使用带有'overflow:hidden'样式的容器div可以让您按照图形中所示进行遮罩。然后通过将屏蔽内容设置为'position:absolute'并调整'left'值,可以轻松移动屏蔽内容。

我在http://jsfiddle.net/BDZPj/

在线提供了一个简短的例子

唯一的问题是,您必须知道正在滚动的内容的高度,因为您还必须为蒙版设置高度。你可以从document.ready上的表中读取高度,并最初将它应用到容器中。

无论如何,就像'Pointy'在上面的评论中所说,使用标准滚动条肯定是最好的方法 - 有时客户也必须移动。