Prevent background scroll on iOS devices

[keithslater]

I am using this code to prevent background scrolling

$(document).on('cbox_open',function(){
  $(document.body).css('overflow','hidden');
}).on('cbox_closed',function(){
  $(document.body).css('overflow','');
});

However this doesn't work on iOS devices. Any solutions?

[senechaux]

I'm using this one:

$(document).on('cbox_open',function(){
  $(document.body).css('position','fixed');
}).on('cbox_closed',function(){
  $(document.body).css('position','');
});

[KingWebsites]

To solve this issue I now add the following to my configuration

$.colorbox({
  ...
  fixed: true,
  onOpen: function() {
    var ycoord = $(window).scrollTop();
    $('#colorbox').data('ycoord',ycoord);
    ycoord = ycoord * -1;
    $('body').css('position','fixed').css('left','0px').css('right','0px').css('top',ycoord + 'px');
  },
  onClosed: function() {
    $('body').css('position','').css('left','auto').css('right','auto').css('top','auto');
    $(window).scrollTop($('#colorbox').data('ycoord'));
  }
})

This stores the current position of the background page and 'display fixed' the background. When we close the modal window we un-'display fixed' the background and make sure we scroll to the right place. The background doesn't appear to move at all.

[adammolnar]

Thanks @KingWebsites, this is finally the solution I was looking for for a long time! I tried a lot, but I didn't get the idea of setting the body top to the negative scrollTop value. Here’s my vanilla js solution. Call this function on opening and closing your modal:

var bodyScrollTop;

setBodyUnscrollable(value) {
  if (value) bodyScrollTop = document.body.scrollTop;
  document.body.style.overflow = (value) ? 'hidden' : '';
  document.body.style.position = (value) ? 'fixed' : '';
  document.body.style.left = (value) ?  '0' : '';
  document.body.style.right = (value) ?  '0' : '';
  document.body.style.top = (value) ? -bodyScrollTop + 'px' : '';
  if (!value) document.body.scrollTop = bodyScrollTop;
}

For sure you can put left, right, overflow and position into a CSS class and then toggle it.

[pnvardhan]

@KingWebsites I have tried using $.colorbox({ ... fixed: true, onOpen: function() { var ycoord = $(window).scrollTop(); $('#colorbox').data('ycoord',ycoord); ycoord = ycoord * -1; $('body').css('position','fixed').css('left','0px').css('right','0px').css('top',ycoord + 'px'); }, onClosed: function() { $('body').css('position','').css('left','auto').css('right','auto').css('top','auto'); $(window).scrollTop($('#colorbox').data('ycoord')); } }) It works fine to stop scroll affect but some how only in Iphone, Ipad Safari browser alone after a scroll up the page and opening the Colorbox is getting applied with a overflow : hidden CSS. I have tried using onComplete : function() { $('#colorbox').css('overflow', 'visible'); }, but no use. My Issue is if i do a scroll up in page and open a color box is having added with overflow : hidden which is suppressing the colorbox text to display to user. any suggestions.?

[ApeRunner]

@KingWebsites You are the BOSS!

Thank you very much. Your solution saved my day!