javascript - 在没有 Javascript 的情况下滚动可滚动的 DIV？

Question

我基本上有一个固定宽度的 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 技巧。

谢谢!

Answer 1

我怀疑这只能用 CSS 和 HTML 来解决。除非您使用某些其他语言(如 PHP)可以为您生成具有更改的 DIV 顺序的 HTML。

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

1. 您最初使用 css style="display:none;"
显示您的 DIV
2. 使用 JavaScript 进行滚动(以及其他内容，如需要时更改 DIV 的顺序)。
3. 设置 CSS style="display:block;"

即项目将显示在已经滚动的屏幕上。