確定子div是否達到父母的頂部和底部

我已經有一個div在另一個裏面。內部div（#items）在父div（#itemWrapper）內滾動。我在頂部和底部有兩個箭頭。確定子div是否達到父母的頂部和底部

當內部div達到父div的底部時隱藏底部箭頭，並在內部div達到其父div的頂部時隱藏頂部箭頭。

我的問題是如何獲得子div相對於其父元素的距離/偏移量，以確定它是否已達到頂部或底部？

這裏是一個FIddle

這個我試過找孩子的div其父的位置。但沒有奏效。

編輯：

HTML：

<div class="id="Wrapper"> 
     <div class="row"> 
      <img src="http://img42.com/p2OH4+" class="arrows" id="upArrow" height="128" width="128" /> 
     <div id="itemWrapper"> 
      <div id="items"> 
       <div class="content"> 
        <input type="image" src="http://img42.com/p1puE+" class = "thumb" /> 
       </div> 
       <div class="content"> 
        <input type="image" src="http://img42.com/p1puE+" class = "thumb" /> 
       </div> 
       <div class="content"> 
        <input type="image" src="http://img42.com/p1puE+" class = "thumb" /> 
       </div> 
      </div> 
     </div> 
      <img src="http://img42.com/h1DoP+" class="arrows" id="downArrow" height="128" width="128" /> 
     </div>    
    </div>

JQ：

('#subGrHolder').offset().top - $('#subGrHolder').parent().offset().top - $('#subGrHolder').parent().scrollTop();

來源

2015-05-23 Becky

您的鏈接演示沒有（似乎）具有任何滾動功能。如果代碼被包含*和*再現了你的問題，這個問題會更有意義。 –

@DavidThomas謝謝。它具有滾動功能。滾動藍色邊框的div。我在我的文章中包含了html結構。 – Becky

計算最上面的位置應該像'$（'＃items'）。scrollTop（）=== 0'一樣簡單，但是對於底部，您是否看過'items'的'scrollHeight'？它可以用來計算滾動的數量。 –

您可以輕鬆地使用.scrollTop()這一點。例如：

if ($('#subGrHolder').scrollTop() > 100){ 
    alert("show top arrow!") 
}

來源

2015-05-23 22:32:21 Fergoso

我打算把這些我在評論中詳細說的。希望這是你正在尋找的。

的JavaScript：

var items = $('#items'); 
var upArrow = $('#upArrow'); 
var downArrow = $('#downArrow'); 
var scrollFactor = 100; 
var scrollLeeway = 2; 

items.on('scroll', onScroll); 
upArrow.on('click', onUp); 
downArrow.on('click', onDown); 

function onScroll() { 
    if (items.scrollTop() === 0) { 
     upArrow.css('opacity', 0.1); 
    } else if (items[0].scrollHeight - items.scrollTop() <= items.height() + scrollLeeway) { 
     downArrow.css('opacity', 0.1); 
    } else { 
     upArrow.removeAttr('style'); 
     downArrow.removeAttr('style'); 
    } 
} 

function onUp(){ items.scrollTop(items.scrollTop() - scrollFactor); } 
function onDown(){ items.scrollTop(items.scrollTop() + scrollFactor); }

jsFiddle。

道歉，如果我完全誤解了你的問題。

來源

2015-05-23 23:32:02

確定子div是否達到父母的頂部和底部

回答

相關問題