Question

HTML：

<div class="outer-scroll">
 <div class="inner">
  <a class="outer-arrow left"> <  </a>
  <a class="outer-arrow right"> > </a>
 </div>
</div>

JQuery的：

 $(function() {

    var lastLeftLocation = 0;
    var main_width = $('.inner').width();
    var offset = 100; 

    $('.outer-scroll').scroll(
        function(e)
        {               
             if (main_width - offset) {
                $(".outer-arrow.right").css({display: 'none'});
            }

            else
            {
                 $(".outer-arrow.right").css({display: 'block'});
            }



            lastLeftLocation     =    e.currentTarget.scrollLeft;
        });

});

我试图这样做，当你到达滚动内部容器的最远点时，右箭头消失。我用Google搜索，但似乎无法找到任何方向。

有什么想法吗？

Answer 1

它适用于角度

<div class="container" (scroll)="onScroll($event)">
   <div class="content">
       Some content 
   </div>
</div>


onScroll(event: Event) {
   if (event.target.scrollLeft + event.target.offsetWidth === event.target.scrollWidth){
      console.log('end');
   }
}

Answer 2

您可以将Element.scrollwidth与Element.scrollLeft和Element.clientWidth结合使用：

$('.outer-scroll').scroll(function(e) {
  var _this = this
  $(".outer-arrow.right", this).css({
    display: _this.scrollWidth === (_this.scrollLeft + _this.clientWidth) ? 'none' : 'block'
  });
}).scroll();

div {
  width: 200px;
  height: 100px;
  overflow: auto;
}
div div {
  width: 500px;
  height: 100px;
}
div a{position:fixed;}
a.left{left:0px;}
a.right{left:12px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer-scroll">
  <div class="inner">
    <a class="outer-arrow left">
      < </a>
        <a class="outer-arrow right"> > </a>
  </div>
</div>

检测水平滚动的结束

2 个答案: