Question

我在一个带有滚动条的外部div中有div。当滚动到达外部div的末尾时我可以得到警报，但是我希望在到达每个内部div的结束时收到警报。

html结构如下：

<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＃1，＃2，＃3，＃4的末尾并且滚动条附加到外部div时收到通知。

提前致谢。

Answer 1

<强> 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');
      }
    })
  }
);

<强>小提琴：

http://jsfiddle.net/Yq3MW/

希望这有帮助。

Answer 2

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

在滚动外部div时达到内部div结束时通知

2 个答案: