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

用户名

当内容的相应边缘与容器的侧面重叠时,我试图在容器中显示左右导航箭头(这些箭头替换了滚动条的存在)。

同样,当内容一直滚动到末尾且无法再滚动时,箭头应消失。

在此处输入图片说明

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

我开始这样写逻辑:

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

但这似乎不是正确的逻辑。在我去实际编写函数之前,这听起来很简单。

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

这是一个堆栈片段:

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

加布里埃莱·彼得里奥利(Gabriele Petrioli)

您需要检查内容宽度减去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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

Related 相关文章

热门标签

归档