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

I'm trying to display a right / left navigation arrow within a container (the arrows replace the existence of a scrollbar) when the corresponding edge of the content overlaps the container's sides.

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

Also, when the content is scrolled all the way to the end and can't scroll any further, the arrow should disappear.

此外，当内容一直滚动到结尾并且无法进一步滚动时，箭头应该消失。

My problem is, I'm confused as to how I write the function to check whether the element's contents are overlapping one edge or the other to hide one arrow or the other.

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

I started writing logic like this:

我开始写这样的逻辑：

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

but that doesn't seem to be the right logic. It sounded simpler in my head before I went to actually write the function.

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

How do I check whether the right/left edge of an element is overlapping the side of it's container?

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

Here's a Stack Snippet:

这是一个Stack Snippet：

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

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;
}

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

1 个解决方案

#1

You need to check if the content width minus the scrollLeft is greater than the wrapper width. If it is show the right scroller..

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

Something like this

像这样的东西

$(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>