logo标签列表

滚动外部 div 时，当内部 div 结束处被滚动到时通知

javascriptjqueryhtml
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时，可以收到通知。

提前致谢。

你尝试过任何脚本了吗？如果尝试过，请展示一下。 - Kamal
我已经尝试过viewport，但这里的viewport是窗口而不是外部div。 - Anshuma
@Anshuma 我相信你忘记关闭 <div id="outer">。 - Andreas Wong
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');
      }
    })
  }
);​

Fiddle：

http://jsfiddle.net/Yq3MW/

希望这能有所帮助。
1
最好使用console.log('end reached')而不是警告(alerts)。此外，对于简单性和Jsfiddle示例，它应该是被接受的答案。 - AbdelHady
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>
首先感谢。非常感激您的回复。该代码仅适用于第一个div，其余的并没有正常工作。 - Anshuma
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接