Magnific Popup - Browser scrolls on the top on image click

Question

I am using Magnific Popup plugin for displaying image in lightbox.When I click on the image in Chrome, the browser scrolls on the top, after that the menu is not clickable.

$('.img-item').magnificPopup({ 
    type: 'image',
    gallery:{
        enabled:true
    }   
});

Answer 1

Alright folks, I guess I found the solution.

I trimmed off my full script yet fixedContentPos: false, adding noscroll to body element on "open" and remove it on "close" is important :

$('.open-link').magnificPopup({
  type: 'image',
  closeOnBgClick: true,
  fixedContentPos: false,
  callbacks: {
    open: function() {
      jQuery('body').addClass('noscroll');
    },
    close: function() {
      jQuery('body').removeClass('noscroll');
    }
  }
});

Finally, create a CSS rule for noscroll as :

body.noscroll {
  overflow-y: hidden!important;
}

fixedContentPos:false prevents using fixed position for body and keeps the scrollbar on the same position. However, it doesn't prevent scroll and user is still able to scroll up / down. Using overlow-y:hidden hides scrollbar and disables mousewheel.

Answer 2

Magnific has an option fixedContentPos. This is set to 'auto' by default, causing it to fix content to the top. Setting fixedContentPos: false should force magnific to use the absolute position based on current scroll.