Prevent DIV from scrolling away horizontally (sticky) but allow vertical scroll

Question

Is it possible to prevent an element from scrolling away horizontally, but allow it to scroll vertically with the rest of the page content? It's a little hard to describe, so let me show an example:

HTML:

<nav>Side Nav</nav>
<header>Header</header>
<main> 
   <h1>Main Content</h1>
   <div class="wideContainer">
      Some wide and tall container
   </div>
</main>

CSS:

nav {
  position: fixed;
  width: 150px;
  height: 100vh;
}
header {
  height: 100px;
  padding-left: 150px;
}
main {
  padding-left: 150px;
}
.wideContainer {
  width: 2000px;
  height: 1000px;
}

https://jsfiddle.net/hg2zmu1o/7/

As you can see, the left column is fixed. The header scrolls away when you scroll vertically. This is correct. But when there is some wide content in the main region, it makes a horizontal page scroll (which is fine). However, when scrolling horizontally, the header also moves behind the side nav column.

How can I make it stay horizontally?

I tried using position:sticky but without success.

position: sticky;
left: 150px;

Keep in mind, I don't want to do position:fixed on the whole header, because then it wouldn't scroll vertically with the rest of the page.

The jsfiddle illustrates the problem.

EDIT:

Found this example that demonstrates the behavior I'm after. It uses JS though, which I was hoping to avoid.

$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + 15 
         //Why this 15, because in the CSS, we have set left 15, so as we scroll, we would want this to remain at 15px left
    });
});

If anyone knows how to achieve it with pure CSS let me know. Otherwise I may go with this in the meantime.

Erika_Mac · Answer 1 · 2018-10-03T03:58:44.037

0

Just add overflow-x to your CSS.

body {
  padding: 0;
  margin: 0;
  overflow-x:hidden;
}
nav {
  position: fixed;
  width: 150px;
  background-color: gray;
  height: 100vh;
}
header {
  height: 100px;
  background-color: silver;
  padding-left: 150px;
}
main {
  padding-left: 150px;
}
.wideContainer {
  width: 100%;
  height: 1000px;
  background-color: turquoise;
}

<nav>Side Nav</nav>
<header>Header</header>
<main> 
 <h1>Main Content</h1>
 <div class="wideContainer">
   Some wide and tall container
 </div>
</main>

Is this what you've been looking for?

I also made this and this.

Hope it helps!

edited Oct 03 '18 at 03:58

answered Oct 03 '18 at 02:24

Erika_Mac

11
6

Thanks for the help, but sorry, no, this isn't what I'm looking for. `overflow-x: hidden` hides any overflown content, and I need ability to scroll horizontally to see it. The stuff in the "wideContainer" cannot be wrapped. Imagine it's a large data table with many columns across, and the users must scroll horizontally to be able to see it. However, while scrolling horizontally to see the data in the main region, the header should remain in place. But if you scroll vertically, it should scroll up/down (therefore one of your solutions with `fixed` header doesn't work for that). – Jiveman Oct 03 '18 at 05:35
Did you [this link](https://codepen.io/anon/pen/mzVRvM?editors=0100)? You can scrow it horizontally, but the header keeps in its place. If it's not what you want, can you post a page/website picture, or link, of what you exactly expect? – Erika_Mac Oct 03 '18 at 18:31
I did. And as I said already, the header in that example stays fixed even when scrolling vertically. My requirement is to NOT fix the header when scrolling up/down. Only left/right. I have posted an edit in my post above linking to [a solution that uses JS](http://jsfiddle.net/Starx/EzXub/). I'm going to use that in the meantime, but I'm still interested if there is a pure CSS solution. – Jiveman Oct 03 '18 at 21:03
I just came up with [this](https://codepen.io/anon/pen/QZNGqN?editors=1000). Guess this is my best shot for it. Hope I got it right! – Erika_Mac Oct 04 '18 at 01:09
Thanks again, but I'm afraid it's not very usable as-is, as the user isn't aware there is a horizontal scroll until they reach the bottom of main content (which may be below the viewport). Once at the bottom, you can scroll horizontally (and the header stays, yes), but then you have to scroll back up to see the scrolled main content. I may just have to stay with the JS-based solution I found. – Jiveman Oct 04 '18 at 05:47

Prevent DIV from scrolling away horizontally (sticky) but allow vertical scroll

HTML:

CSS:

EDIT:

1 Answers1