- Notify when end of inner div is reached on scrolling outer div
- <html><head></head>
- <body>
- <div id = "outer" style= "width:200px;height:200px; overflow:auto;">
- <div id = "#1" class = "inner"> blah blah </div>
- <div id = "#2" class = "inner"> blah blah </div>
- <div id = "#3" class = "inner"> blah blah </div>
- <div id = "#4" class = "inner"> blah blah </div>
- </div>
- </body>
- </html>
- <div id = "outer" style="width:200px;height:200px; overflow:auto;">
- <div id = "#1" class = "inner"> blah blah </div>
- <div id = "#2" class = "inner"> blah blah </div>
- <div id = "#3" class = "inner"> blah blah </div>
- <div id = "#4" class = "inner"> blah blah </div>
- <div id = "#5" class = "inner"> blah blah </div>
- <div id = "#6" class = "inner"> blah blah </div>
- <div id = "#7" class = "inner"> blah blah </div>
- <div id = "#8" class = "inner"> blah blah </div>
- <div id = "#9" class = "inner"> blah blah </div>
- <div id = "#10" class = "inner"> blah blah </div>
- <div id = "#11" class = "inner"> blah blah </div>
- <div id = "#12" class = "inner"> blah blah </div>
- </div>
- jQuery(
- function($)
- {
- $('#outer').bind('scroll', function()
- {
- if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
- {
- alert('end reached');
- }
- })
- }
- );
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- var outerHeightDiv = [], sumHeight = 0;
- $('#outer').find('.inner').each(function (i) {
- sumHeight += $(this).outerHeight();
- outerHeightDiv.push(sumHeight);
- });
- $('#outer').scroll(function () {
- var scrollTopHeight = $(this).scrollTop();
- var indexNo = $.inArray(scrollTopHeight, outerHeightDiv);
- //$('#Result').text('Innner div id is:' + indexNo + ' ' + scrollTopHeight + ' ' + outerHeightDiv.join(',')).show();
- if (indexNo > -1) {
- $('#Result').text('Innner div id is:' + $('#outer .inner:eq(' + indexNo + ')').attr('id')).fadeIn(600).fadeOut(600);
- }
- });
- });
- </script>
- </head>
- <body>
- <span id="Result" style="color: Red; font-size: 15px; font-weight: bolder; display: none;">
- </span>
- <div id="outer" style="width: 200px; height: 200px; overflow: auto;">
- <div id="#1" class="inner">
- blah blah blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah blah blah blah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blah blah blah blah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blah blah blah blah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- blahblah blahblah blahblah blahblah blah blah blah blah blahblah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- blahblah blahblah blahblah blah blah blah blah blahblah blahblah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- blahblah blahblah blah blah blah blah blahblah blahblah blahblah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- blahblah blah blah blah blah blahblah blahblah blahblah blahblah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- blah blah blah blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah blah
- ----------------------------------------------------
- </div>
- <div id="#2" class="inner">
- blah blah blah blah blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah blah
- blah blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah blah blah blah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blah blah blah blah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blah blah blah blah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- blahblah blahblah blahblah blahblah blah blah blah blah blahblah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- blahblah blahblah blahblah blah ----------------------------------------------------
- </div>
- <div id="#3" class="inner">
- blah blah blah blah blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah blah
- blah blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah blah blah blah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blah blah blah blah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blah blah blah blah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- ----------------------------------------------------
- </div>
- <div id="#4" class="inner">
- blah blah blah blah blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah blah
- blah blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah blah blah blah
- blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
- ----------------------------------------------------
- </div>
- </div>
- </body>
- </html>