1

Criei uma galeria e gostaria que ela só aparecesse as duas primeiras linhas, e o restante ficasse escondida, então quando a pessoa rolasse o scroll do mouse, fosse aparecendo as outras, até o final, só então quando chegar ao final da galeria começar a rolagem da página de fato.

Eu tentei criando uma classe envolvendo a galeria e aplicando um overflow-x: auto e um max-height, mas ficou meio estranho, só funciona se o mouse estiver sobre a área da galeria, e quando quero rolar a página eu tento que levar o mouse para outra área da página.

Essa parte cinza abaixo é simulando o rodapé, seria legal quando estiver rolando a página, aí aparecesse uns 150px do rodapé aí começasse a rolagem da galeria.

Deu pra vocês entender?

.galeria {
  float: left;
  width: 100%;
  overflow-x: auto;
  max-height: 240px;
}

.galeria ul {
  list-style: none;
  float: left;
  width: 100%;
}

.galeria li {
  float: left;
  width: 20%;
  padding: 1px;
}

.galeria img {
  width: 100%;
  height: auto;
}

.rodape {
  float: left;
  width: 100%;
  height: 300px;
  background: #7f8c8d;
  margin-top: 30px;
}
<div class="galeria">
  <ul>
    <li>
      <img src="http://placehold.it/200x150/1abc9c/ffffff" alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/2ecc71/ffffff" alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/3498db/ffffff" alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/9b59b6/ffffff" alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/34495e/ffffff" alt="">
    </li>

    <li>
      <img src="http://placehold.it/200x150/34495e/ffffff" alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/9b59b6/ffffff" alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/3498db/ffffff" alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/2ecc71/ffffff" alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/1abc9c/ffffff" alt="">
    </li>

    <li>
      <img src="http://placehold.it/200x150/1abc9c/ffffff" alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/2ecc71/ffffff" alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/3498db/ffffff" alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/9b59b6/ffffff" alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/34495e/ffffff" alt="">
    </li>

    <li>
      <img src="http://placehold.it/200x150/34495e/ffffff" alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/9b59b6/ffffff" alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/3498db/ffffff" alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/2ecc71/ffffff" alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/1abc9c/ffffff" alt="">
    </li>
  </ul>
</div>

<div class="rodape"></div>

1 Resposta 1

0

Bom você pode fazer isso usando javascript e jquery criei um script bem simples aqui ( veja funcionando aqui ) adicione ao seu codigo

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" >

</script>
<script>
    setInterval(function(){
        var gallery = $(".galeria");
        if(gallery.scrollTop() > (parseInt(gallery.find("ul").height()) - parseInt(gallery.height()))){
            $("html").css({"overflow":"auto"}); 
        }else{
            $("html").css({"overflow":"hidden"});   
        }
    });
</script>

Ele veirifica se o scroll da div galeris é maior do que o height da <ul> caso seja ele deixa o body rolar caso contrário ele não deixa

Lembranod que se você já tiver usando jquery em seu projeto pode ignorar essa linha

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" >

E caso esteja trabalhando off-line ou prefira fazer o download jquery use esse link

1
  • Obrigado marcos, quase deu certo, no entanto no projeto que quero implementar isso tem um conteúdo antes dessa galeria, com esse código a rolagem da página ficou travada 17/04/2018 às 11:47

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 .