CSS：如何水平修复元素但不垂直修复？

Question

您可以在此处查看示例：http://alboard.free.fr/adrien/test.html

布局基于水平滚动（红色元素）。但是我想要修复顶部（蓝色元素）。

如果用户调整视口大小，则会出现垂直滚动条。如果此时用户向下滚动，则红色元素将上升，而蓝色元素将保持固定。这会打破布局（红色元素与蓝色元素重叠）。

是否可以使蓝色元素水平固定但可垂直滚动？

我知道有基于onscroll的javascript解决方案。但是在用户滚动的那一刻和元素的位置适应新偏移的那一刻之间总会存在延迟。

Answer 1

不使用JavaScript，您可以使用具有溢出属性的嵌套div：

在父div中嵌入两行div。您的水平滚动条应该来自底部嵌套div（您的顶部嵌套div应该没有水平滚动条）。您的垂直滚动条将来自您的父div（您的嵌套div将没有垂直滚动条）。

然后，如果有人垂直滚动，两个嵌套的div都会滚动。如果有人水平滚动，只有你的底部嵌套div会滚动（顶部嵌套的div将显示为固定）。

Answer 2

除非你的＃fixed-element中有非常复杂的内容，否则javascript onscroll处理程序就可以了。

  <script type="text/javascript">
    function handleScroll()
    {
        document.getElementById('fixed-element').style.top = "-"+document.body.scrollTop+"px";
    }
  </script>

尝试一下，看看它是否适用于您的内容。正如迈克所说，我不认为只有CSS才能做到这一点。