ionic want e.detail.scrollBottom

本文关键字：scrollBottom detail want ionic 更新时间：2023-09-26

.directive('scrollWatch', function($rootScope) {
        return function(scope, elem, attr) {
            var start = 0;
            var threshold = 150;
            elem.bind('scroll', function(e) {
                if(e.detail.scrollTop - start > threshold) {
                    $rootScope.slideHeader = true;
                } else {
                    $rootScope.slideHeader = false;
                }
                console.log('e'+ e.detail.scrollTop);
                if ($rootScope.slideHeaderPrevious  >= e.detail.scrollTop - start) {
                    $rootScope.slideHeader = false;
                }
                console.log($rootScope.slideHeader);
                $rootScope.slideHeaderPrevious = e.detail.scrollTop - start;
                $rootScope.$apply();
            });
        };
    })

这给我e.detail.scrollTop但我想要e.detail.scrollBottom。我无法了解这个。帮助我

简单！滚动底部的基本公式是

$(document).height() - $(#element).scrollTop() - $(#element).height();

由于我没有你的全部代码，我无法给出确切的解决方案。但只要有一些线索，你就能找到它。只需遵循公式。

那就是

文档高度-当前元素位置-当前元素窗口高度

你的代码会是这样的。

.directive('scrollWatch', function($rootScope) {
        return function(scope, elem, attr) {
            var start = 0;
            var threshold = 150;
            elem.bind('scroll', function(e) {
                if(e.detail.scrollTop - start > threshold) {
                    $rootScope.slideHeader = true;
                } else {
                    $rootScope.slideHeader = false;
                }
                console.log('e'+ e.detail.scrollTop);
                if ($rootScope.slideHeaderPrevious  >= e.detail.scrollTop - start) {
                    $rootScope.slideHeader = false;
                }
                console.log($rootScope.slideHeader);
                $rootScope.slideHeaderPrevious = $(document).height()-e.detail.scrollTop - e.detail.height();
                $rootScope.$apply();
            });
        };
    })