确定子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是否达到父母的顶部和底部

回答

相关问题