Angular：如何在滚动事件上继续重置 $timeout，否则让 $timeout 完成

Question

我正在开发一个小控制器，它监视滚动事件并应用 CSS 类，并应用不同的 CSS 类。长话短说，我试图让滚动条拇指在您不滚动时消失，并在您滚动时出现（就像 iPhone 上的滚动条拇指一样）。

我在实现它时遇到了麻烦。我这样做的想法是：

1) On page load, set a $scope variable to false. 
2) Watch for a scroll event on the div I want.
3) Once the scroll event starts, set the $scope variable to true. 
4) Keep on resetting the $timeout whenever a scroll event fires.
5) In the timeout function, set the $scope variable back to false if the $timeout finishes.
6) In the HTML, set an ng-class to watch for this $scope variable.

我认为这听起来很简单，但是我在实现它时遇到了很多麻烦，我不确定我是否只是缺少关于 $timeout 的东西，或者我只是在思考圈子和还没有意识到。

这是我为它设置的控制器（实际工作的 JSFiddle 链接在这堵代码墙的下方）：

(function () {
    'use strict';
    angular
        .module('scrollingApp')
        .controller('scrollbarController', scrollbarController);

    function scrollbarController($scope, $timeout) {
        $scope.actuallyScrolling = false;

        $scope.scrolling = function() {
            $('.container').on('scroll', function(event) {
                $scope.actuallyScrolling = true;
                console.log('before checkScroll ', $scope.actuallyScrolling);
                checkScroll();
            });
        };

        var checkScroll = function() {
            var timeoutEnded = false;
            $timeout(function() {
                if($scope.actuallyScrolling) {
                    $scope.actuallyScrolling = false;
                    console.log('inside $timeout if statement', $scope.actuallyScrolling);
                }
            }, 1000);
            console.log($scope.actuallyScrolling);
        };
        $scope.scrolling();
    }
})();

我在这里 (https://jsfiddle.net/hurgledurf/k5naeora/) 使用我目前拥有的代码设置了一个 JSFiddle（希望它是不言自明的），并且希望任何人都可以提供任何帮助/见解。谢谢！

Answer 1

Angular of not...要“重置”滚动超时应该这样完成：

var timer;
$('.container').on('scroll', function(event) {
  console.log('User is actually scrolling...');

  clearTimeout(timer);
  timer = setTimeout(function(){
    console.log('User finished scrolling.');
  },500);

});

它替换了你的这段代码：

$('.container').on('scroll', function(event) {
  $scope.actuallyScrolling = true;
  console.log('before checkScroll ', $scope.actuallyScrolling);
  checkScroll();
});