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

我在具有滚动条的外部div内部有div。我可以在滚动时达到外部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时收到通知。

在此先感谢。

来源

2012-05-04 Anshuma

您是否尝试过任何脚本......如果您确实使用了plz show ..... – Kamal

我试过[视口]（http://www.appelsiini.net/projects/viewport），但是这里的视口是窗口而不是外部div。 – Anshuma

@Anshuma我相信你忘记关闭了' –

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/

希望这有助于。

来源

2012-05-04 06:58:05 AlphaMale

'使用'console.log（'end reached'）'比警报更好。而不是那个，它应该是被接受的答案，简单性和Jsfiddle示例 – AbdelHady

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

来源

2012-05-04 07:13:46 Thulasiram

不要在侧滚事件中使用警报。浏览器正在挂... – Thulasiram

首先谢谢。感谢你的回复。该代码只适用于第一格。 – Anshuma

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

回答

相关问题