How can I continue normal scroll after scrolling t

Question

This page uses an overflow box so you can scroll through content:

http://jsbin.com/itajok/539/edit?html,js,output

If you scroll to the bottom of that content, your scroll is stuck in that box until you move your cursor out of the box and scroll through the rest of the page.(the element in the example is set to position:fixed, but removing that rule still has the same result)

And this happens to me for any div with defined height and overflow: auto;

<style>
div {
    overflow: auto;
    height: 100px;
}
</style>

<div>
Overflow is auto and if I add more content that exceeds the height, I can scroll
</div>

How can I make it so that, after scrolling to the bottom of an overflow div, it returns to scrolling the actual page automatically?

Answer 1

JQuery solution

First check this JS functions:

$().scrollTop()          // To know how much has been scrolled
$().innerHeight()        // To know inner height of the element
DOMElement.scrollHeight  // To know height of the content of a DOM element

Now let me show you a snippet where using the functions it detects when you have reached the end of the content of a DOM element, as could be a div, and then change the focus to the main container. To continue scrolling from there.

#mycontainer {
position:absolute;
background:#cccccc;
    overflow: auto;
    height: 140px;
    width:700px;
}
#mycontent {
position:relative;
display:block;
margin:0 auto;
background:#aaaaaa;
 overflow: auto;
    height: 120px;
    width:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mycontainer">

<div id="mycontent">
Lorem ipsum dolor sit amet <br>
Consectetuer augue nibh lacus at <br>
Pretium Donec felis dolor penatibus <br>
Phasellus consequat Vivamus dui lacinia <br>
Ornare nonummy laoreet lacus Donec <br>
Ut ut libero Curabitur id <br>
Dui pretium hendrerit sapien Pellentesque <br>
Lorem ipsum dolor sit amet <br>
Consectetuer augue nibh lacus at <br>
Pretium Donec felis dolor penatibus <br>
Phasellus consequat Vivamus dui lacinia <br>
Ornare nonummy laoreet lacus Donec <br>
Ut ut libero Curabitur id <br>
Dui pretium hendrerit sapien Pellentesque <br>
Lorem ipsum dolor sit amet <br>
Consectetuer augue nibh lacus at <br>
Pretium Donec felis dolor penatibus <br>
Phasellus consequat Vivamus dui lacinia <br>
Ornare nonummy laoreet lacus Donec <br>
Ut ut libero Curabitur id <br>
Dui pretium hendrerit sapien Pellentesque <br>

</div>
Lorem ipsum dolor sit amet <br>
Consectetuer augue nibh lacus at <br>
Pretium Donec felis dolor penatibus <br>
Phasellus consequat Vivamus dui lacinia <br>
Ornare nonummy laoreet lacus Donec <br>
Ut ut libero Curabitur id <br>
Dui pretium hendrerit sapien Pellentesque <br>
Lorem ipsum dolor sit amet <br>
Consectetuer augue nibh lacus at <br>
Pretium Donec felis dolor penatibus <br>
Phasellus consequat Vivamus dui lacinia <br>
Ornare nonummy laoreet lacus Donec <br>
Ut ut libero Curabitur id <br>
Dui pretium hendrerit sapien Pellentesque <br>
Lorem ipsum dolor sit amet <br>
Consectetuer augue nibh lacus at <br>
Pretium Donec felis dolor penatibus <br>
Phasellus consequat Vivamus dui lacinia <br>
Ornare nonummy laoreet lacus Donec <br>
Ut ut libero Curabitur id <br>
Dui pretium hendrerit sapien Pellentesque <br>
Lorem ipsum dolor sit amet <br>
Consectetuer augue nibh lacus at <br>
Pretium Donec felis dolor penatibus <br>
Phasellus consequat Vivamus dui lacinia <br>
Ornare nonummy laoreet lacus Donec <br>
Ut ut libero Curabitur id <br>
Dui pretium hendrerit sapien Pellentesque <br>
Lorem ipsum dolor sit amet <br>
Consectetuer augue nibh lacus at <br>
Pretium Donec felis dolor penatibus <br>
Phasellus consequat Vivamus dui lacinia <br>
Ornare nonummy laoreet lacus Donec <br>
Ut ut libero Curabitur id <br>
Dui pretium hendrerit sapien Pellentesque <br>
Lorem ipsum dolor sit amet <br>
Consectetuer augue nibh lacus at <br>
Pretium Donec felis dolor penatibus <br>
Phasellus consequat Vivamus dui lacinia <br>
Ornare nonummy laoreet lacus Donec <br>
Ut ut libero Curabitur id <br>
Dui pretium hendrerit sapien Pellentesque <br>
</div>

<script>

jQuery(
  function($)
  {
    $('#content').bind('scroll', function()
                              {
                                if($(this).scrollTop() + $(this).innerHeight()  >= $(this)[0].scrollHeight())
                                {
                                  $('#container').focus();
                                }
                              })
  })
  
  </script>

The only wrong, as it is binded to the event scroll of the content item,

 $('#content').bind('scroll', function() .....

and the example detects full scroll with:

if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight)

It is a right way to detect full scroll having in mind the block height BUT For your situation, you will notice sometimes you need to scroll, when you are down yet, to execute the jquery and change the focus. You can always improve this but is a bit of what you are looking for. Feel free to ask what you need.