在滾動外部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的結束時通知

回答

相關問題