如何检查元素的右/左边缘是否与其容器的侧面重叠？

Question

当内容的相应边缘与容器的边重叠时，我试图在容器内显示右/左导航箭头（箭头代替滚动条的存在）。

此外，当内容一直滚动到最后并且不能再滚动时，箭头应该消失。

我的问题是，我对如何编写函数以检查元素的内容是否重叠一个边缘或另一个边缘以隐藏一个箭头或另一个箭头感到困惑。

我开始写这样的逻辑：

function setArrows(elem){
    if (elem.scrollLeft() > 0) { //scroll position is greater than zero
        // show left arrow
    } 
    if () { //scroll position is less than zero
        //show right arrow
    }
}

但这似乎不是正确的逻辑。在我真正编写函数之前，这听起来更简单。

如何检查元素的右/左边缘是否与其容器的边缘重叠？

这是一个Stack Snippet：

＆＃13;

＆＃13;

$('#wrapper').scroll(function(){
  //check edges
});

＆＃13;

div {
  padding: 0px;
  margin: 0px;
}
#wrapper {
  width: 500px;
  height: 100px;
  background-color: blue;
  overflow-x: scroll;
  overflow-y:hidden;
}
#content {
  width: 1000px;
  height: 100px;
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="wrapper">
  <div id="content">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要检查内容宽度减去scrollLeft是否大于包装器宽度。如果显示右侧滚动条..

像这样的东西

$(function() {
  var content = $('#content'),
    arrows = $('.arrow'),
    wrapper = $('#wrapper').scroll(function() {
      //check edges

      // handle left arrow
      if (this.scrollLeft > 0) {
        arrows.filter('.left').addClass('visible');
      } else {
        arrows.filter('.left').removeClass('visible');
      };

      // handle right arrow
      if (content.outerWidth() - this.scrollLeft > wrapper.width()) {
        arrows.filter('.right').addClass('visible');
      } else {
        arrows.filter('.right').removeClass('visible');
      };

    });

  arrows.on('click', function() {
    if ($(this).is('.left')) {
      wrapper[0].scrollLeft -= 100;
    } else {
      wrapper[0].scrollLeft += 100;
    }
    return false;
  });

  // initialize
  wrapper.trigger('scroll');
});

div {
  padding: 0px;
  margin: 0px;
}
#wrapper {
  width: 500px;
  height: 100px;
  background-color: blue;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
}
#content {
  width: 1000px;
  height: 100px;
  background: url('http://lorempixel.com/1000/100/abstract/2') 0 0 no-repeat;
}
#full-container {
  position: relative;
  display: inline-block;
}
.arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  background-color: black;
  display: none;
  z-index: 100;
  cursor: pointer;
  color: #fff;
  text-align: center;
  line-height: 100px;
}
.arrow.visible {
  display: block;
}
.arrow.left {
  left: 0
}
.arrow.right {
  right: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div id="full-container">
  <div class="arrow left">&lt;</div>
  <div id="wrapper">
    <div id="content"></div>
  </div>
  <div class="arrow right">&gt;</div>
</div>