stackoom
  简体   繁体   中英

Notify when end of inner div is reached on scrolling outer div

 原文  2012-05-04 05:41:58  2   2    javascript/ jquery/ html

Question

I have divs inside an outer div which has scroll bars. I can get the alert when the end of outer div is reached on scrolling but i want to get the alert when end of each inner div is reached.

The html structure is something as follows. 

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

i want to get notifications when ends of divs #1,#2,#3,#4 are reached and scroll bars are attached to outer div.

Thanks in advance.

2 answers

solution1
 1  2012-05-04 06:58:05

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

JS: 

jQuery(
  function($)
  {
    $('#outer').bind('scroll', function()
    {
      if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
      {
        alert('end reached');
      }
    })
  }
);​

Fiddle:

http://jsfiddle.net/Yq3MW/

Hope this helps.

solution2
 0  2012-05-04 07:13:46

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question fix inner div at the top of outer div and when scrolling outer div, prevent inner div overflowing on the outer div Is it possible to know when scrolling a div with overflow: scroll reached the end? Outer div is hiding when clicking on inner div Scrolling a div from an outer div VueJS disable outer div scroll and enable again after inner div reached its bottom Change css of inner div when outer div's css change How to avoid overflow of inner div when resize the outer div? correctly adjust the outer div when the inner div is deleted Inner div with margin and padding eventually exceeds outer div when zooming clicking inner div to trigger outer div event
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM