You can see an example here: .html

The layout is based on horizontal scrolling (the red element). But I want the top part to be fixed (the blue element).

If the user resizes the viewport, a vertical scrollbar will appear. If at this point the user scrolls down, the red element will go up while the blue element will remain fixed. This breaks the layout (the red element overlaps with the blue element).

Is it possible to make the blue element fixed horizontally but scrollable vertically?

I know there are javascript solutions based on onscroll. But there's always a latency between the moment the user scrolls and the moment the element's position adapts to the new offset.

You can see an example here: http://alboard.free.fr/adrien/test.html

The layout is based on horizontal scrolling (the red element). But I want the top part to be fixed (the blue element).

If the user resizes the viewport, a vertical scrollbar will appear. If at this point the user scrolls down, the red element will go up while the blue element will remain fixed. This breaks the layout (the red element overlaps with the blue element).

Is it possible to make the blue element fixed horizontally but scrollable vertically?

I know there are javascript solutions based on onscroll. But there's always a latency between the moment the user scrolls and the moment the element's position adapts to the new offset.

• javascript
• html
• css

• I do not know of a way to do this with CSS2 and without dynamic scripting. – Karmic Coder Commented Sep 25, 2009 at 18:33

2 Answers 2

Without using JavaScript, you can use nested divs with overflow properties:

Nest two rows of divs inside a parent div. Your horizontal scrollbar should be from your bottom nested div (your top nested div should have no horizontal scrollbar). Your vertical scrollbar will be from your parent div (your nested divs will have no vertical scrollbars).

Then, if someone scrolls vertically, both nested divs will scroll. If someone scrolls horizontally, only your bottom nested div will scroll (the top nested div will appear fixed).

Unless you have very plicated content inside your #fixed-element, a javascript onscroll handler would work just fine.

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

Give it a try and see if it works for your content. As Mike said, I don't think there is a CSS only way to do this.