1

My main goal is to disable body scrolling when a custom modal popup (not AJAX control kit) is showing up.

Is it possible to set the body css overflow:hidden without hiding the scrollbar (vertical in this case) because the page "jumps" to the right the width of the scrollbar. I understand it's possible to set the margin-left to negative width of the scrollbar, but may there's more "neat" way to accomplish this?

$('body').css({
   "overflow": "hidden"
   // ???
});

If there's a better way to solve my problem - I'm all ears (and eyes) :)

Thanks in advance

LazyZebra
  • 1,029
  • 15
  • 24
  • I don't understand the question. overflow:scroll is the same as overflow:hidden except in this case, you can scroll to see the rest. – Joel Worsham Oct 29 '13 at 16:38
  • 4
    `overflow: hidden` is just to hide the scroll bar, for what else do you want to use it? – Alvaro Oct 29 '13 at 16:39
  • Thanks Joel - the general thing I need to accomplish is to disable the body scrolling when a custom modal popup is showing. – LazyZebra Oct 29 '13 at 16:40
  • 2
    Edit your question so it exposes your problem, and not a wrong solution you're trying to work around and make it right. – melancia Oct 29 '13 at 16:41
  • 1
    Are you looking to keep the scrollbar look on the sides, but to hide the extra content with `overflow:hidden`? – usernolongerregistered Oct 29 '13 at 16:42
  • You can take the custom pop-up out of the flow by setting `position: fixed;` for it. – Teemu Oct 29 '13 at 16:42
  • @Teemu, there's a serious mess with positions absolute and fixed all over the app (not my code, need a bandaid to fix and forget) – LazyZebra Oct 29 '13 at 16:44
  • 2
    I'm guessing what you're really trying to do is highjack the scroll event in javascript, and prevent it when a modal is showing ? – adeneo Oct 29 '13 at 16:45
  • @adeneo and Agony - yes – LazyZebra Oct 29 '13 at 16:46
  • 2
    Have a look at this... http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily – Reinstate Monica Cellio Oct 29 '13 at 16:47
  • facebook uses `position:fixed;` hence should be the better option – Ravi Hamsa Oct 29 '13 at 16:49
  • Is there a reason you can't use HTML to solve this? Like put a `div` around the `body`, then make the `div{overflow-y:scroll}` but the body `overflow:hidden`? – usernolongerregistered Oct 29 '13 at 16:50
  • @Agony - I tried something similar by accessing the #aspnetForm and it just didn't work... I am trying the link by Archer right now. – LazyZebra Oct 29 '13 at 16:53
  • 1
    Here's a fiddle of it. http://jsfiddle.net/Agony/94Rnr/ – usernolongerregistered Oct 29 '13 at 16:54
  • @Archer - Please put your comment in an answer, I will mark it as SOLVED. Thanks a lot to rest of you guys - what I needed is a bandaid really - the code is an effing CSS disaster, nested MasterPages, JS hidden in DLLs, etc. Thanks again and Happy Halloween! \m/ – LazyZebra Oct 29 '13 at 16:57
  • 1
    @Eric Sharp: No need, I've marked your question as a duplicate. You can still keep your question around as a signpost to redirect any searchers to the other question. – BoltClock Oct 29 '13 at 17:06
  • There is an another approach to solve this, without the need to prevent the default behaviours of the mouse scroll. You can add a "backdrop" `div` that will mask over your body content when the modal is triggered. Then set the backdrop's `overflow` property to `scroll` and the `body`'s `overflow` to `hidden`. This will give the illusion that the scroll is "disabled" on the body content. Of course there are some initial css rules you need to apply to the backdrop `div`. Use devtools to inspect how [twitter bootstrap](http://getbootstrap.com/javascript/#modals) does it. – Suvi Vignarajah Oct 29 '13 at 17:16

0 Answers0