隐藏和显示基于滚动位置的导航箭头

Question

我有一个带有箭头的水平列表，可以通过它进行导航，并且我试图让它在到达结尾时得到右箭头消失（并且左边箭头）。这是作品.....有点。我的问题是，需要额外的点击才能让它们消失，即使点击之前的点击会到达列表的末尾。任何建议将不胜感激！

JsFiddle link

//Hide left at start 
$('#lefty').hide(); 
//left arrow controls 
$('#lefty').click(function(){ 
    if($('.container').scrollLeft() == 0) 

     {$('#lefty').hide()} 
    $('#righty').show(); 
$(".container").animate({scrollLeft: "-=100px"}) 
}) 
//right arrow controls 
$('#righty').click(function(){ 
    if ($('.container')[0].scrollWidth - $('.container').scrollLeft() == $('.container').width()) 
     {$("#righty").hide()} 
    $('#lefty').show(); 
$(".container").animate({scrollLeft: "+=100px"}) 
}) 

Answer 1

您需要申请条件后的动画完成，在当前的代码评估条件与动画中的一些价值。使用这个：

//Hide left at start 
$('#lefty').hide(); 

//left arrow controls 
$('#lefty').click(function(){ 

    $('#righty').show(); 
    $(".container").animate({scrollLeft: "-=100px"}, "normal", function(){ 
     if($('.container').scrollLeft() <= 0){ 
      $('#lefty').hide(); 
     } 
    }); 
}); 

//right arrow controls 
$('#righty').click(function(){ 
    $('#lefty').show(); 

    $(".container").animate({scrollLeft: "+=100px"}, "normal", function(){ 
     if ($('.container')[0].scrollWidth - $('.container').scrollLeft() == $('.container').width()){ 
      $("#righty").hide(); 
     } 
    }); 
}); 

Answer 2

我不确定这是否是最好的方式，但工程。我只是添加一个div来打印宽度，只需更改验证。看看jsfiddle来查看它是如何工作的。

js fiddle

//Hide left at start 
$('#lefty').hide(); 
//left arrow controls 
$('#lefty').click(function(){ 
    $("#mensaje").append("<br>"+$('.container').scrollLeft()); 
if($('.container').scrollLeft() <= 100) 
    {$('#lefty').hide()} 
$('#righty').show(); 
$(".container").animate({scrollLeft: "-=100px"}) 
}) 
//right arrow controls 
$('#righty').click(function(){ 
     $("mensaje").append("<br>"); 
     $("#mensaje").append($('.container')[0].scrollWidth -  $('.container').scrollLeft()); 
if ($('.container')[0].scrollWidth - $('.container').scrollLeft() <= 500) 
    {$("#righty").hide()} 
$('#lefty').show(); 
$(".container").animate({scrollLeft: "+=100px"}) 
})