1

I know this is a frequently asked question, but the solution to add body.modal-open {overflow:hidden;} to solve this problem as mentioned in this post won't work, if CSS3 is included.

  • See for example this bootply, where it is possible to scroll the body.
  • Same example without including CSS3 -> bootply. The standard solution works perfectly.

How can I prevent the Body from scrolling when modal is opened and CSS3 is included?

Community
  • 1
  • 1
d4rty
  • 3,970
  • 5
  • 34
  • 73

2 Answers2

2

Adding the class noscroll to the body when the modal is open, solves the problem.

JS:

$("#myModal").on("show", function () {
  $("body").addClass("noscroll");
}).on("hidden", function () {
  $("body").removeClass("noscroll")
});

CSS:

.noscroll { overflow: hidden; }

See on bootply.

d4rty
  • 3,970
  • 5
  • 34
  • 73
0

You can use 

$('html, body').css('overflow', 'hidden');

in the open callback of the modal, and revert it onClose

Pietro
  • 988
  • 10
  • 19
  • Did you tried it? Because the css rule from my example makes exactly this and it isn't working. – d4rty Apr 29 '16 at 14:57
  • This will work. In your example, you have ``html { overflow-x: hidden }`` which doesn't apply vertically – Ardian Apr 29 '16 at 14:59
  • But both bootply examples have `overflow:hidden` ?! – d4rty Apr 29 '16 at 15:02
  • Check this http://luxiyalu.com/playground/overlay/ from this SO answer http://stackoverflow.com/questions/9280258/prevent-body-scrolling-but-allow-overlay-scrolling/9280412#9280412 – Pietro Apr 29 '16 at 15:17