How to make a scrollable div expand to full height on scroll and click

I'm looking to update the below section if possible.

I need to have a div 250px high but lets you scroll through all of the content. Once you have scrolled to the bottom of the 250px window, it automatically expands to show the full content.

Also there would be a button below which if clicked expanded the section if you don't scroll down.

Does anyone know if this is possible?

I can only get it to expand when you click on the window at present.

https://codepen.io/sharpy24ws/pen/QWWrOoz

div {
width: 100%;
height: 250px;
background: #ccc;
overflow-y: auto;
}

#container{
margin:0px auto;
border:1px solid red;
}

#container div{
position:relative;
float:left;
margin-right:5px;
}
#container div span{
position:absolute;
bottom:0;
right:0;
}

$(window).load(function(){
$("div").css("overflow", "hidden");
$('div').click(function() {
$(this).animate({
height: '100vh'
})
})
});

Solution

Copy and paste this and run once.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Scroll Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
    .is_box{
      height:250px;
      text-align:center;
      overflow:auto;
    }
    </style>
</head>
<body>
  <div class="is_box" id="box">
    <h3>Lorem Ipsuum Dummy Text & COntent1</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent2</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent3</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent4</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent5</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent6</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent7</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent8</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent9</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent10</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent11</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent12</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent13</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent14</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent15</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent16</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent17</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent18</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent19</h3>
  </div>

  <div>
    <button id="expand">CLick me</button>
  </div>
  <div>
    <h3>Other COntent</h3>
    <h3>Other COntent</h3>
    <h3>Other COntent</h3>

  </div>
</body>

<script>
  $(function($) {
    $('#box').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
          $(this).css('height','max-content');
        }
    })

    $('#expand').on('click',function(e){
      e.preventDefault();
      $('#box').css('height','max-content');
    });
});
</script>
</html>

I hope it will help you