3

スクロールバーを持つ外側の 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 にスクロール バーが接続されたときに通知を受け取りたい。

前もって感謝します。

4

2 に答える 2

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/

お役に立てれば。

于 2012-05-04T06:58:05.233 に答える
0 
<!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-04T07:13:46.093 に答える