javascript - Disable the body scroll, but keep it on individual div elements which are greater in height than the browser - Stac

admin管理员组

文章数量:1401947

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

Share Improve this question Follow asked Oct 24, 2012 at 21:39 Muhammed BhikhaMuhammed Bhikha 5,01999 gold badges3737 silver badges4747 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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;
}

本文标签：