當用戶單擊按鈕並到達底部或頂部時，將按鈕設為“禁用”

Question

我遇到一個類似的問題，當用戶單擊“移動頂部”和“移動底部”按鈕並基於一些像素滾動到相應方向時，以及當他停頓按鈕的頂部或底部時，我需要禁用按鈕，禁用按鈕。

您可以在此處演示小提琴演示

$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的大小可能會增加，因為它取決於DB。
2. 我不想使用jQuery

謝謝

Answer 1

有角度的方法是創建一個指令來控制此行為，並在滾動容器時調用一個方法。

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>

快速骯臟的小提琴： http ： //jsfiddle.net/c6uxhy08/