Javascript jQuery可通过箭头滚动ul(到达列表顶端或底端时移除箭头)

Javascript jQuery可通过箭头滚动ul(到达列表顶端或底端时移除箭头),javascript,jquery,html,css,Javascript,Jquery,Html,Css,看 我想要的是,在开始时,不需要向上箭头图标,但当用户单击向下箭头时,它应该出现,当用户到达ul li列表中的最后一个itme时,底部箭头应该消失 我怎样才能检查它 (function () { $('#scrollup').on({ 'mousedown touchstart': function() { $(".sidebar-menu").animate({scrollTop: 0}, 2000); }, 'mouseup touchend':

我想要的是,在开始时,不需要向上箭头图标,但当用户单击向下箭头时,它应该出现,当用户到达ul li列表中的最后一个itme时,底部箭头应该消失

我怎样才能检查它

(function () {

  $('#scrollup').on({
    'mousedown touchstart': function() {
      $(".sidebar-menu").animate({scrollTop:  0}, 2000);
    },
    'mouseup touchend': function() {
      $(".sidebar-menu").stop(true);
    }
  });

  $('#scrolldown').on({
    'mousedown touchstart': function() {
      $(".sidebar-menu").animate({
        scrollTop:  $(".sidebar-menu")[0].scrollHeight
      }, 2000);
    },
    'mouseup touchend': function() {
      $(".sidebar-menu").stop(true);
    }
});

})();
试着用这个


您可以使用
$('.sidebar menu').scrollTop()值来检查这一点

例如,我编写了一个名为check()的函数,它检查滚动的位置并显示/隐藏相应的箭头。此函数在每个箭头的鼠标触摸结束事件时调用

function check() {
    if ($('.sidebar-menu').scrollTop() == 0) {
        $('#scrollup').hide();
        $('#scrolldown').show();
    } else if ($('.sidebar-menu').scrollTop() == height - 100) {
        $('#scrolldown').hide();
        $('#scrollup').show();
    }
}

查看它的实际操作:

工作正常,但仅显示一个阵列。假设it用户拒绝,并且必须向上获取两个内容,这将不起作用。你是对的。我修复了检查函数我觉得这可以做得更好但是现在想不出一个办法为什么你要写$('.sidebar menu')。scrollTop()==height-100,而不是硬编码的100,我们可以使用其他东西吗?因为scrollTop()值没有考虑容器本身的高度,所以我们需要抵消这一点,以确定何时到达页面底部。例如,容器的总长度是300,您已经将容器的高度设置为100px。然后页面底部的scrolltop()值为300-100=200。您还可以使用jquery$('.sidebar menu').height()动态获取容器的高度,该值将返回100或任何高度(如果容器为)。你的想法是对的!:)干得好
function check() {
    if ($('.sidebar-menu').scrollTop() == 0) {
        $('#scrollup').hide();
        $('#scrolldown').show();
    } else if ($('.sidebar-menu').scrollTop() == height - 100) {
        $('#scrolldown').hide();
        $('#scrollup').show();
    }
}