1

Perdoem-me se estiver errado, pois não sei o nome exato do efeito no qual estou à procura, já vi tal efeito em algumas páginas pela Internet mas no momento não tenho nenhum link no qual eu possa usar como exemplo.

Como descrito na pergunta, estou à procura de um efeito que ao clicar num link/botão qualquer, ele abrirá um Lightbox e ao ativar esse Lightbox, o scroll da página (ou seja do body) deverá ser desativado e um novo scroll será adicionado, que representará o scroll do conteúdo em aberto do Lightbox.

Portanto se eu mexer no scroll com o Lightbox em aberto, o conteúdo que irá rolar será o conteúdo do Lightbox e não o conteúdo da página, até que o Ligthbox seja fechado ou desativado!

Novamente perdoem-me pela falta de exemplos! A pergunta de fato é muito vaga, mas espero que me possam ajudar.

1 Resposta 1

2

Uma rápida abordagem seria criar uma classe com overflow:hidden; responsável por tirar o scroll do body:

.lightbox-open {overflow:hidden;}

No qual esta será adicionada à tag <body> e accionada/implementada via jQuery quando o lightbox também for accionado. E para o scroll do lightbox basta dar um overflow:auto; ao elemento que contém o conteúdo do lightbox. Por outras palavras:

$('.dispara').click(function() {
    $('.overlay').show();
    $('body').addClass('lightbox-open');
});
$('.overlay').click(function() {
    $('.overlay').hide();
    $('body').removeClass('lightbox-open');
});
body{min-height:1500px;}
.lightbox-open{overflow:hidden;}

.overlay{
    display:none;
    overflow:auto;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.8);
}
.background-content {
    overflow: auto;
    padding-top: 45px;
    padding-left: 35px;
}
.dispara {
    cursor: pointer;
    background-color: #006FFF;
    color: #fff;
    padding: 4px 8px;
    border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<span class="dispara">lança Lightbox</span>
<div class="overlay">
    <div class="overlay-content">
        <img src="http://lorempixel.com/400/200/city"/>
        <img src="http://lorempixel.com/400/200/fashion"/>
        <img src="http://lorempixel.com/400/200/nature"/>
    </div>
</div>

<div class="background-content">
    ... Corpo do site aqui ...
</div>

3
  • Uma ótima forma de fazer o que eu queria!! Agradeço desde já! Commented 8/02/2016 às 4:44
  • para um melhor posicionamento da pergunta! Que nome você daria esse efeito? Porque pode ser que outras pessoas venham a procurar por tal coisa! E um titulo mais adequado a pergunta poderia ajudar! Commented 9/02/2016 às 15:08
  • Já editei a sua pergunta para um título mais conveniente, com mais keywords e mais preciso, tanto para pesquisa no SO como para pesquisas em SEO's como o Google ou outro @ivanveloso :)
    – Chun
    Commented 10/02/2016 às 1:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .