Question

我在另一个里面有一个div。内部div（#items）在父div（#itemWrapper）内滚动。我的顶部和底部有2个箭头。

我想在内部div到达父div的底部时隐藏底部箭头，并在内部div到达其父div的顶部时隐藏顶部箭头。

我的问题是如何获得子div相对于其父元素的距离/偏移量，以确定它是否已达到顶部或底部？

我试过这个找到子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();

Answer 1

您可以轻松使用.scrollTop()。例如：

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

Answer 2

我将在评论中详细说明我所说的内容。希望这是你想要的。

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

如果我完全误解了你的问题，请道歉。

确定子div是否达到父级的顶部和底部

2 个答案: