Prevent Background Scroll Behind a Fixed Div in Mobile Safari?

Question

How can I prevent the body area from scrolling behind a fixed div overlay in mobile safari?

overflow: hidden works as a standard, but doesn't seem to be doing the trick on mobile devices.

Finally, here are some code excerpts I have already implemented:

CSS:

body {
  margin: 0;
  padding: 0;
  border: 0;
}

body.no-scroll {
  position:relative;
  overflow: hidden;
  height: 100%;
}

JS:

$(document).ready(function () {
  $('.activate-div-overlay').click(function() {
    $('body').addClass('no-scroll');
  });
});
$(document).ready(function () {
  $('.close-div-overlay').on('click', function(){
    $('body').removeClass('no-scroll'); 
  });
});