Ao usar o lightbox ou qualquer outro popup em um site, um problema típico é lidar com as barras de rolagem da página principal.
Adicionar overflow: hidden;
o corpo ao abrir o pop-up e removê-lo no fechamento apenas ocultaria a barra de rolagem e desabilitaria a rolagem. Isso é bom em um mac típico, onde você não tem nenhuma barra de rolagem visível, a menos que você esteja, de fato, rolando.
Mas quando você conecta um mouse ou usa qualquer outro sistema, está tendo problemas, porque agora, as barras de rolagem estão visíveis o tempo todo. A adição simples overflow: hidden;
não funciona mais, porque a página subjacente do popup saltaria, porque a barra de rolagem desaparece.
A solução é encontrada no stackoverflow
Primeiro, você precisa de uma classe css
html.noscroll {
position: fixed;
overflow-y: scroll;
width: 100%;
}
Em seguida, execute este código ao abrir o pop-up
if ($(document).height() > $(window).height()) {
var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop(); // Works for Chrome, Firefox, IE...
$('html').addClass('noscroll').css('top',-scrollTop);
}
Por último, mas não menos importante, você precisa deste snippet para ser executado ao fechar o pop-up
var scrollTop = parseInt($('html').css('top'));
$('html').removeClass('noscroll');
$('html,body').scrollTop(-scrollTop);
é isso aí.