在没有Javascript的情况下滚动可滚动的DIV?

时间:2011-08-27 00:27:55

标签: javascript jquery html scrollable

我基本上有一个固定宽度的DIV,里面有一个无序列表,当列表太大时会溢出到DIV的右边。它基本上是这样的:

http://i.imgur.com/Tr36X.jpg

每个列表项(基本上是60x60图像)都是可点击的,它会导致页面具有相同的DIV元素和相同的列表项,除了一个突出显示不同的颜色以显示它是当前图像。我正在尝试做的是获取当前选中的那个(它具有class="active"属性)以在滚动DIV的中间显示,如下所示:

http://i.imgur.com/YtF1y.jpg

我能想到的唯一方法是在页面上包含一个Javascript文件,以查找具有class="active"属性的列表项,然后使用Javascript滚动到它。问题是,当页面加载时,它最初不会滚动到正确的位置,当Javascript加载并执行时,用户将看到它“跳转”到位。

有没有办法在没有Javascript的情况下做我想要的事情?如果需要,我不介意一点标记和CSS hackery。

谢谢!

1 个答案:

答案 0 :(得分:0)

我怀疑这只能用CSS和HTML解决。除非你使用其他语言(如PHP),否则可以生成一个改变了DIV顺序的HTML。

但是,我可以解决你的Javascript“跳跃”问题。

  1. 您最初使用css显示您的DIV style =“display:none;”
  2. 使用JavaScript滚动(以及其他内容,例如在需要时更改DIV的顺序)。
  3. 设置css style =“display:block;”
  4. 即。项目将显示在已滚动的屏幕上。