javascript - Angular : how to keep resetting $timeout on scroll events, 否则让 $timeout 完成

Question

我正在开发一个小 Controller ，它监视滚动事件并应用一个 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 的东西，或者我是否只是在思考还没有意识到。

这是我为它设置的 Controller (一个实际工作的 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();
});