I can't scroll when body overflow: hidden and an fixed element

Question

I want to hide my scrollbar, so i gave the body of my site overflow:hidden;
Now I want to have my menubar fixed on the top of my page, with position: fixed;

But when I put my menubar on fixed I can't scroll my whole page anymore with my scrollwheel.
Who knows an answer?

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

This is working, but when i put a position: fixed; on my menu, i can't scroll anymore.

.menu {
    position: fixed;
    width: 100%;
    height: 50px;
}

I hope you understand my question.

Dendy

Could you provide a fiddle demo? – Cobia

From what I understand you're using overflow: hidden on a page you still want to scroll? – Patrilineage

Sorry, i can't make a fiddle demo at the moment. But here is my site eduweb.hhs.nl/~13002465 I want to fix my top menu. but when I do that, I can't scroll anymore. – Dendy

The fixing of the top menu has nothing to do with the position: fixed;. Turning it on or off on your site does not make a difference for the scrolling on your site. overflow: hidden; is what disables the scrolling. Things seem to work fine for me when I disable that and set the menu to position: fixed;. – Stealing

If you look at my site (eduweb.hhs.nl/~13002465), the body overflow is already hidden and i can scroll normally. But when I put the position of my menu at position:fixed; it won't work anymore. – Dendy

When I look at your site (on Chrome 29), that's not how it is, I can't scroll at all, because the overflow is set to hidden. – Stealing

I can scroll on chrome(with mousewheel) and i want the scrollbar to hide, its working at the moment. I only want to have my menu to be position: fixed; Thanx for the comments by the way! – Dendy

I can scroll with the scroll wheel on your site, but when I experiment with a fiddle, it doesn't scroll, even without the menu bar fixed. So your site does something different than my fiddle! – Myxomatosis

Answer 1

You can accomplish this using jquery.mousewheel.js plugin.

Here is a demo of your page using this plugin: http://jsfiddle.net/BQeWx/

Javascript:

$('html,body').bind('mousewheel',function(ev, delta) {
    var scrollTop = $(this).scrollTop();
    $(this).scrollTop(scrollTop-Math.round(delta * 1));
});

CSS:

body, html { overflow: hidden; }

.body_wrapper {
    overflow: hidden;
    margin: 0; 
    padding: 0;
    width: 100%; 
    height: 100%; 
}

.wrapper {
    width: 100%;
    margin: 48px auto 0 auto;
    z-index: 10;
}

I've had to make a few modifications to your CSS which are noted in the comments.

If this is the intended user experience, you should consider adding a fixed 'return to top' link that appears off to the side or bottom of each section.

Documentation for plugin: https://github.com/brandonaaron/jquery-mousewheel

Hope this helps, cheers.

Keeling

Thanx, but I want the page to be scrollable with your mousewheel, but no scrollbar. Now you can't scroll with your mousewheel. It works without the top container positioned fixed. But when I fix the top container it disables scrolling with your mousewheel. I hope you understand my question. – Dendy

It's working properly in Firefox and IE, but not in Google Chrome. – Dendy

I just tested it in Chrome again, appears to be working properly. Perhaps try again? Can anyone else confirm? – Keeling

Did you just test eduweb.hhs.nl/~13002465 ? Because it doesn't work over here :( I find it strange that it's working in jsfiddle and not on my own site. – Dendy

Hi Dennis, here's a quick screencast showing it working on jsfiddle: screencast.com/t/4IJXXb5iuDV - I can't say why it's working on jsfiddle and not on your site, but hopefully you'll confirm that this is a viable solution. Is it possible that you have additional assets/scripts being called on your website vs. the fiddle example? Best of luck! – Keeling

My head is bursting at the moment.. I don't know what's wrong with it. I think (if it's not working eventually) I won't hide my scrollbar anymore. But I like it more without a scrollbar. Thanx for all the help! – Dendy

Answer 2

I have the same problem if you put the menu fixed any other element can not be fixed just the unique who is put on the top from siblings and beneath. I can resolve this issue with html structure.

<body>
<nav class="menu"></nav>
<section></section>
<section>/<section>
....
<body>

Flyspeck