Image gallery with scrolling

Question

I created a gallery and I would like it to only appear the first two lines, and the rest to remain hidden, so when the person rolls the scroll mouse, were appearing the others, until the end, only then when you reach the end of the gallery start scrolling the page in fact.

I tried creating a class involving the gallery and applying a overflow-x: auto and a max-height, but it got kind of weird, it only works if the mouse is over the gallery area, and when I want to scroll the page I try to take the mouse to another area of the page.

This gray part below is simulating the footer, it would be nice when you are rolling the page, then it appears some 150px of the footer then start scrolling the gallery.

You can understand that?

.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>

Answer 1

Well you can do it using javascript and jquery created a very simple script here ( see working here ) add to your code

<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>

It turns out if the scroll of the div galeris is larger than the height of the <ul> if it is he lets the body roll otherwise he does not let

Remember that if you have already used jquery in your project you can ignore this line

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

And if you are working offline or prefer to do the download jquery use this link