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）来生成 HTML 并更改 DIV 的顺序。

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

1. 您最初使用 css style="display:none;"显示您的 DIV
2. 使用 JavaScript 进行滚动（如果需要，还可以使用其他东西，例如更改 DIV 的顺序）。
3. 设置 css style="display:block;"

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