Turn off body scrolling, but save it on separate div elements that are taller than the browser.

Question

I searched everywhere and have not yet received a solution. Well, this is a bargain, I have a site with one page on which there are several div elements under each other, sort of like separate pages that I assume. What I want to achieve is to disable scrolling of the actual web page all together, but still scrolling the active div in the game if it goes below the web browser. To get to each other, the page section is simply made using anchor links in the header.

Answer 1

I'm not quite sure what you are looking for, but I think you want the div to be a scrollable, but not an actual document. You can do this by absolutely positioning the div on a fixed-height screen and set the overflow parameter to auto . I did this using the following CSS code:

 #scrollable { position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; overflow: auto; }​ 

See an example: http://jsfiddle.net/rustyjeans/rgzBE/

Answer 2

Have you tried with overflow-x:hidden;

Answer 3

Just disable global mice and scroll keys when the mouse is on the body element.

 var disableKeys = [33,34,35,36,37,38,39,40]; var mouseOverElement; $('*').on('mouseover', function(e) { if(e.target === e.currentTarget) { mouseOverElement = e.target; } }); $(document).keydown(function(e) { var key = e.which; if(disableKeys.indexOf(key) > -1 && mouseOverElement.tagName == "BODY") { e.preventDefault(); } }); $(document).on("mousewheel", function(e) { if(mouseOverElement.tagName == "BODY"){ e.preventDefault(); }; }); 

Working example: http://jsfiddle.net/9cSeq/2/

Answer 4

turns out to be pretty simple. CSS

 body{ overflow:hidden; } #div_you_need_scrolling{ overflow:auto; }