堆棧內存溢出
  簡體   English   中英

在滾動外部div時達到內部div結束時通知

[英]Notify when end of inner div is reached on scrolling outer div

 原文  2012-05-04 05:41:58  7   2    javascript/ jquery/ html

問題描述

我有一個外部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時收到通知。

提前致謝。

2 個解決方案

解決方案1
 1  2012-05-04 06:58:05

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/

希望這可以幫助。

解決方案2
 0  2012-05-04 07:13:46

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 將內部div固定在外部div的頂部，並在滾動外部div時防止內部div在外部div上溢出 是否可以知道何時滾動帶有溢出的 div：滾動到達末尾？ 單擊內部div時，外部div隱藏 從外部div滾動div VueJS禁用外部div滾動並在內部div到達底部后再次啟用 當外部div的css更改時更改內部div的css 調整外部div的大小時如何避免內部div溢出？ 刪除內部div時正確調整外部div 縮放時，帶有邊距和填充的內部div最終超過外部div 點擊內部 div 觸發外部 div 事件
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM