jQuery Scroll：检测结束和开始

Question

编辑>> Plunker：http://plnkr.co/edit/LY7LUAylvKQ3pIv9lhYM?p=preview

我已经为 Tab-Titles 实现了 jQuery Scroll，效果很好。

如果我在开头，左侧的箭头应该会消失，而当我向右移动时，它应该会显示出来。如果我在最后，右侧的箭头应该会消失。

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

这些是按钮：

 $('#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);
 });

Answer 1

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

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

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

您的 app.js 的完整工作代码如下所示

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

  }


);

我希望这对你有用:)