Scrolling inside a div also scrolls the content behind it after reaching it's end (Mobile HTML)

I have designed a mobile website for a client. A div appears up from the footer and it has a list of categories where I have to give a vertical scroll.

What I want is that when the scroll inside the div ends, the body should not scroll until I close down this div.

Here is a link to my website http://ketchupdesigns.com/jwmobile/

And Here is a picture of that div (opened div under 'kurtis')

when we scroll inside this div, it reaches it's end and then if we scroll...the body behind it scrolls (As shown in following image)

Please help if possible.

Answers


Body scroll effect can be removed through CSS Property, overflow: hidden

Create a CSS Class

.no-scroll
{
    overflow: hidden;
}

by using JQuery add this class to body when popup is open this will cause the body not to scroll.

$( "body" ).addClass( "no-scroll" );

remove it as soon as it closes down to make it scrollable again

$( "body" ).removeClass( "no-scroll" );

I hope this will work for you...

good luck!


Need Your Help

How to use the Request URL/URL Rewriting For Localization in ASP.NET - Using an HTTP Module or Global.asax Code

.net asp.net localization url-rewriting httpmodule

I wanted to see if there is a way to use the request URL/URL rewriting to set the language a page is rendered in by examining a portion of the URL in ASP.NET. We have a site that already works wit...

Java wait/notify not call in thread

java multithreading singleton synchronized

I have a problem when scheduling two threads (ReadData and WriteData). It seems that I can't notify after wait.