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>