I have searched everywhere and have yet to get a solution. Okay heres the deal, I have a one page website which has several div elements underneath each other, sort of acting like individual pages I guess. What I want to achieve is to disable the scrolling of the actual web page all together, yet keeping the scroll of the active div in play if it goes below the web browser. To get to each other section of the page is simple done by using anchor links on the header.

I have searched everywhere and have yet to get a solution. Okay heres the deal, I have a one page website which has several div elements underneath each other, sort of acting like individual pages I guess. What I want to achieve is to disable the scrolling of the actual web page all together, yet keeping the scroll of the active div in play if it goes below the web browser. To get to each other section of the page is simple done by using anchor links on the header.

• javascript
• jquery
• html
• css

• What is the question? Can we see some sample code? – Jason Commented Oct 24, 2012 at 21:50

3 Answers 3

I'm not exactly sure what you're looking for, but I think you want a div to be scrollable, but not the actual document. You can do this by absolutely positioning the div on the screen with a fixed height and set the overflow to auto. I've done this using the following CSS code:

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

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

Have you tried with overflow-x:hidden;

turns out its quite simple. CSS

body{
 overflow:hidden;
}

#div_you_need_scrolling{
 overflow:auto;
}