Javascript jQuery滚动：检测结束和开始

编辑>>Plunker:

我已经为标签标题实现了jqueryscroll，它工作得很好

如果我在开始时，左边的箭头应该消失，当我向右移动时，它应该显示出来。如果我在终点，右边的箭头应该消失

如何检测起点和终点？我希望能够对窗口大小调整做出反应

以下是按钮：

 $('#nextTabBtn').click(function () {
     var $target = $('.tabBoxMantle');
     if ($target.is(':animated')) return;
     $target.animate({
         scrollLeft: $target.scrollLeft() + 300
     }, 800);
 });


 $('#prevTabBtn').click(function () {
     var $target = $('.tabBoxMantle');
     if ($target.is(':animated')) return;
     $target.animate({
         scrollLeft: $target.scrollLeft() - 300
     }, 800);
 });

---

我对Angular不太熟悉，但我仍然尝试解决您的问题

我已经创建了如下切换Prev Tab和Next Tab按钮的函数

function ShowPreviousTabBtn() { // handles prev tab button visibility
  var $targetScroll = $('.auTabBoxMantle');
  if ($targetScroll.scrollLeft() == 0)
    $('#prevTabBtn').hide();
  else
    $('#prevTabBtn').show();
}
function ShowNextTabBtn() { // handles next tab button visibility
  var $targetScroll = $('.auTabBoxMantle');
  var $scrollwidthtotal = $targetScroll[0].scrollWidth;
  var $scrolledwidth = $targetScroll.width() + $targetScroll.scrollLeft();
  if ($scrollwidthtotal <= $scrolledwidth)
    $('#nextTabBtn').hide();
  else
    $('#nextTabBtn').show();
}

---

我希望这对您有用：）

尝试添加标记，否则小提琴会很棒。将您的代码放在JSFIDLE中，您可以使用scroll事件找到scrollLeft位置，因此使用基于scroll的css将其设置为“消失”position@Mayank“问题更新了，”普朗克补充道，“我对Angular不太熟悉，所以这里有大部分答案。”。谢谢@Shikkediel，这也是一个可行的解决方案。非常感谢，请你把它放在plunker上，它在我的环境中不起作用。我必须对窗口大小调整做出反应，angular的代码可以封装它：

angular.element（$window.bind（'resize'，function（）{}）

Prev下一步工作不，我已将其更改为

（$scrollwidthtotal）它完全工作，谢谢！在任何人哭之前，现在我必须像Angular通常期望的那样将所有内容都放入表单中。Angular中的DOM操作必须在指令中明确发生。：）
angular.module('myApp', [])

.controller(

  "MainController",
  function($scope, $http, $window, $document, $location, $anchorScroll) {

    $scope.my = {};
    $scope.my.title = "jQuery Scroll Example";


    $http.get('data.json')
      .success(function(data) {
        $scope.my.tabs = data;
      });

    function ShowPreviousTabBtn() {
      var $targetScroll = $('.auTabBoxMantle');
      if ($targetScroll.scrollLeft() == 0)
        $('#prevTabBtn').hide();
      else
        $('#prevTabBtn').show();
    }

    function ShowNextTabBtn() {
      var $targetScroll = $('.auTabBoxMantle');
      var $scrollwidthtotal = $targetScroll[0].scrollWidth;
      var $scrolledwidth = $targetScroll.width() + $targetScroll.scrollLeft();
      if ($scrollwidthtotal == $scrolledwidth)
        $('#nextTabBtn').hide();
      else
        $('#nextTabBtn').show();
    }

    // Initially hide the previous Tab button
    ShowPreviousTabBtn();
    // Hiding the Next Tab if the Items div is not overflown
    ShowNextTabBtn();

    $('#nextTabBtn').click(function() {

      var $target = $('.auTabBoxMantle');
      if ($target.is(':animated')) return;
      $target.animate({
        scrollLeft: $target.scrollLeft() + 300
      }, 800)
      .promise().done(function() { // used as a callback function for animate
        ShowPreviousTabBtn();
        ShowNextTabBtn();
      });

    });

    $('#prevTabBtn').click(function() {
      var $target = $('.auTabBoxMantle');
      if ($target.is(':animated')) return;
      $target.animate({
          scrollLeft: $target.scrollLeft() - 300
        }, 800)
      .promise().done(function() { // used as a callback function for animate
          ShowPreviousTabBtn();
          ShowNextTabBtn();
        });
    });

  }


);