Детектирование конец горизонтальной прокрутки

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

}); 

Я пытаюсь сделать так, когда вы достигли самой дальней точки прокрутки внутреннего контейнера, право стрелка исчезает. Я googled, но не могу найти никакого направления.

Любые идеи?

Answer 1

Вы можете использовать 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>