Making fixed div's able to horizontally scroll

Question

My website has a fixed width of 1024px to easier implement for smaller screens, the header and the footer that are displayed are in a fixed position.

However when the users has a smaller width than 1024px the header and footer are cut off, which is fine. However you cannot horizontally scroll to see the rest of them.

I imagine to fix this it'd be something to do with the CSS, however I'm unsure on what properties to change / use.

The pages are constructed like so:

<body>
<div class='header'>
    <div class='headerbar'>
        <div class='headerleft'><h1>BMRA Web Client</h1></div>
        <div class='headerright'><!--image here--></div>
    </div>
</div>

<div class='footer'>
    <div class='headerbar'>
        <div class='footerleft'></div><div class='footermiddle'></div><div class='footerright'></div>
    </div>
</div>
</body>

You probably have `overflow: hidden;` somewhere. Hard to say without any code, so please add that. — Topr, Nov 17 '15 at 09:00
You should tryu with something like `overflow: scroll;`. However, show your code. — ojovirtual, Nov 17 '15 at 09:01
Please see ["Should questions include “tags” in their titles?"](http://meta.stackexchange.com/questions/19190/should-questions-include-tags-in-their-titles), where the consensus is "no, they should not"! — , Nov 17 '15 at 09:07
Providing stripped down code examples that explain your problem will help you a ton here, dear Sir. — maryisdead, Nov 17 '15 at 09:09

Marcos Pérez Gude · Accepted Answer · 2015-11-17T10:55:49.550

5

That's as simple as put overflow-x: auto in your header with 100% width.

 .header { 
   overflow: auto;
 }

By this mode, you'll have a header with 100% of width, in small screens you'll see how it shrinks. With the hard pixel definition of the elements inside the header (as 1024px), your content will have this width and the overflow in the parent allows you to scroll it horizontally.

If this doesn't fits with your requirements, maybe you need a global scroll solution, that can be made with simply javascript.

EDIT

As we talk in comments, your solution will be to handle global horizontal scroll and move the fixed header with the content, like a relative or absolute header. To make this you need javascript to read how many pixels you need to move the fixed header. Here you are the complete code:

// when scroll
$(window).on('scroll', function(e) {
    //calculate left position
    var left = $(this).scrollLeft();
    //apply to header in negative
    $('.header').css('left', -left);
});

Do you like to see it working? Try this fiddle:

http://jsfiddle.net/fbvat00q/

EDIT 2

As far as you need to have the background fixed, you must to relativize the children and target it in the javascript. So your final code will be:

CSS:

.headerbar {
      position: relative;
}

Javascript:

$(window).on('scroll', function(e) {
    var left = $(this).scrollLeft();
    $('.headerbar').css('left', -left);
});

See it working:

http://jsfiddle.net/fbvat00q/1/

edited Nov 17 '15 at 10:55

answered Nov 17 '15 at 09:11

Marcos Pérez Gude

21,869
4
38
69

Adding the header and footers own scroll element wont work, as when the page has content such as a table, the page naturally gets it's own scrollbar. However the header and footer doesn't scroll with the content. – Callum Luke Vernon Nov 17 '15 at 09:15
Yeah, in my last paragraph I reffer to that. However, you don't share the HTML and all of us can't see the problem at first time. I can help you with javascript. I will edit my answer. – Marcos Pérez Gude Nov 17 '15 at 09:18
Thanks! This works, however the background colour isn't scrolled with it. Ie it turns white.Like with the fixed content in your fiddle. I'd need the colour to stay present too. – Callum Luke Vernon Nov 17 '15 at 09:31
It's a weird situation that you are explaining. As you can see in the fiddle, all box is moved, not only the text. Can you make a jsfiddle with your code? I can help you better. But the solution is this. – Marcos Pérez Gude Nov 17 '15 at 09:34
You need to target `.headerbar` instead of `.header`. I assume that `.header` have the blue background. – Marcos Pérez Gude Nov 17 '15 at 09:58
This doesn't appear to work setting it to headerbar. When it's set to header the elements move but there's the background-colour issue. set to headerbar the elements don't move... – Callum Luke Vernon Nov 17 '15 at 10:17
Yes, it must be moved. To achieve it set position relative to headerbar: `.headerbar { position: relative; }` and then target it in javascript: `$('.headerbar').css('left', -left);` – Marcos Pérez Gude Nov 17 '15 at 10:51
I update the fiddle to show you how to work with that: http://jsfiddle.net/fbvat00q/1/ – Marcos Pérez Gude Nov 17 '15 at 10:54
Can you upvote @CallumLukeVernon please? Thank you !! – Marcos Pérez Gude Nov 26 '15 at 09:51
1

The first edit on this answer was exactly the fix my problem. I needed to be able to scroll down and up, while being fixed and be able to scroll the fixed element right and left. - Thanks for the solution – Drew Peer Mar 16 '19 at 03:21

score 0 · Answer 2 · answered Nov 17 '15 at 09:01

0

If the main wrapper (that one which is set to width: 1024px) doesnt have overflow: hidden as a property, you should be able to scroll horizontally. Try to set it manually to overflow: auto

answered Nov 17 '15 at 09:01

BozanicJosip

506
6
22

score 0 · Answer 3 · answered Nov 17 '15 at 09:09

0

Loot At This Real Example

You can set wrapper with overflow: scroll, and fixed position, and set for inner value, or spesfic style you want

answered Nov 17 '15 at 09:09

Anees Hikmat Abu Hmiad

3,460
2
19
36

1

Adding the header and footers own scroll element wont work, as when the page has content such as a table, the page naturally gets it's own scrollbar. However the header and footer doesn't scroll with the content. – Callum Luke Vernon Nov 17 '15 at 09:12
when I execute your html was set on question, result print like this: http://jsfiddle.net/hnqn8o9c/1/ – Anees Hikmat Abu Hmiad Nov 17 '15 at 09:17
mm, about your comment, make sure the element like header was a block, and style was set for first inner wrapper, I think its will be resolved issue – Anees Hikmat Abu Hmiad Nov 17 '15 at 09:18
What do you mean by 'style was set for first inner wrapper' ? – Callum Luke Vernon Nov 17 '15 at 09:26

score 0 · Answer 4 · answered Nov 17 '15 at 09:13

To manage abehaviour when content overflow a container(both vertical and horizontal), with fixed dimension, you can use the CSS overflow property (see this link for more details):

scoll : to scroll when content overflow
hidden : to hide the overflowed content
visble : to see the overflowed content even if it does not fit the container

In your case you have to set the property to scroll

.selector{overflow: scroll}

If you want to only manage horizontal overflow, you can set overflow-x CSS property .selector{overflow-x: scroll}

For the vertical overflow you can set overflow-y, .selector{overflow-y: scroll}

score 0 · Answer 5 · answered Nov 17 '15 at 09:15

0

Try setting overflow to scroll horizontally. e.g:

.header {
    overflow-x: scroll;
}

As here: W3C Link

answered Nov 17 '15 at 09:15

RedLaser

680
1
8
20

Making fixed div's able to horizontally scroll

5 Answers5

EDIT

EDIT 2