javascript - 当用户单击按钮并到达底部或顶部时禁用按钮

Question

我有这样的问题，当用户点击“移动顶部”和“移动底部”按钮并根据某些像素滚动到相应方向时，以及当他到达顶部或底部时，我需要禁用按钮按钮，禁用按钮。

你可以在这里弄清楚这个想法 Fiddle demo

$scope.scrollBtns = {
    downDisabled: true,
    upDisabled: false
};
$scope.scrollLogTable = function(topBottom) {
    var scroll_clipper = document.getElementById('scroll_clipper');
    var scrollBy = scroll_clipper.offsetHeight / 2;
    console.log("===========" + topBottom + "====================");
    if (topBottom === 'top') {
        console.log(scroll_clipper.offsetHeight)
        console.log(scroll_clipper.scrollTop, scrollBy)
        $scope.scrollBtns.upDisabled = false;
        var old = scroll_clipper.scrollTop;
        scroll_clipper.scrollTop = scroll_clipper.scrollTop - scrollBy;
        if (scroll_clipper.scrollTop == 0) {
            // we still have some scrolling to do...
            $scope.scrollBtns.downDisabled = false;
        } else {
            if (scroll_clipper.scrollTop < old) {
                // we have reached rock top
                //console.log('scroll_clipper.scrollTop < old if', scroll_clipper.scrollTop < old);
                $scope.scrollBtns.downDisabled = true;
            } else {
                //console.log('scroll_clipper.scrollTop < old else', scroll_clipper.scrollTop < old);
                $scope.scrollBtns.downDisabled = false;
            }
        }

    } else {

        $scope.scrollBtns.downDisabled = false;
        var old = scroll_clipper.scrollTop;
        scroll_clipper.scrollTop = scroll_clipper.scrollTop + scrollBy;
        if (scroll_clipper.scrollTop > scrollBy) {
            console.log("we still have some scrolling to do...");
            $scope.scrollBtns.upDisabled = true;
        } else {
            console.log('scroll_clipper.scrollTop  > scrollBy', scroll_clipper.scrollTop > scrollBy)
            console.log("we have reached rock bottom");
            $scope.scrollBtns.upDisabled = false;
        }
    }
}

当它到达底部或顶部时禁用“移动顶部”和“移动底部”的逻辑没有发生

谁能帮帮我。

注意:

1. div 的大小可能会增加其大小，因为它取决于数据库。
2. 我不想使用 jquery

谢谢

Answer 1

Angular 方式是创建一个控制此行为的指令，并在容器滚动时调用一个方法。

angular.module('app').directive('watchScroll', function () {
    return {
        restrict: 'A',
        scope: {
            onTop: '&',
            onBottom: '&'
        },
        link: function (scope, elements, attrs) {
            var container = angular.element(elements[0]);
            var onScroll = function () {
                var scrollY = elements[0].scrollTop;
                var maxScrollY = elements[0].scrollHeight - elements[0].offsetHeight;
                if (scrollY <= 0) {
                    scope.onTop();
                }
                if (scrollY >= maxScrollY) {
                    scope.onBottom();
                }
            };
            container.on('scroll', onScroll);
            scope.$on('$destroy', function () {
                container.off('scroll', onScroll);
            });
        }
    };
});

然后在您的元素上使用此指令。

<div watch-scroll on-top="callYourFunction()" on-bottom="callYourFunction()"></div>

快速而肮脏的 fiddle :http://jsfiddle.net/c6uxhy08/