jQuery滚动：检测结束和开始

Question

jQuery滚动：检测结束和开始

javascriptjqueryhtmlangularjs

5

EDIT >> Plunker: http://plnkr.co/edit/LY7LUAylvKQ3pIv9lhYM?p=preview

我已经实现了 jQuery 滚动选项卡，它运作良好。

如果我在开头，则左侧的箭头应消失；当我向右移动时，它应该显示。如果我在结尾，则右侧的箭头应消失。

如何检测起始点和结束点？我想要能够响应窗口大小调整。

这些是按钮:

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

- user2227400

1

尝试添加标记，或者提供一个fiddle会更好。 - Mayank

1

将您的代码放在JSFiddle中，您可以使用滚动事件找到scrollLeft位置，因此根据滚动位置使用CSS设置为消失。 - Senthilkumar Govindasamy

@Mayank 问题已更新，代码编辑器已添加。 - user2227400

我对Angular不是太熟悉，这里是一个大部分答案。Plunker - Shikkediel

谢谢@Shikkediel，这也是一个可行的解决方案。 - user2227400

没问题，谢谢回复。也许你仍然可以从中挑选一些东西。 - Shikkediel

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mayank · Answer 1

我对Angular不是很熟悉，但我还是尝试着解决了你的问题。

我创建了一个函数来切换上一个选项卡和下一个选项卡按钮，如下所示：

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

  }


);

我希望这个对你有效 :)