不要滚动元素调整大小

Question

我正在制作一个角度指令，当用户在元素 b 上滚动时隐藏元素 a。它工作正常，但我无法弄清楚这种行为：

这可能很难说，但本质上，当您滚动到底部时，滚动条会展开，因为元素 a 位于元素 b 上方，所以基本上我正在滚动的东西有更多可用空间。在那之后，我不确定它为什么会向上滚动。这是整页的 gif，如果这样更清楚的话：

我的指令是用打字稿写的（角度版本 1.5.7 而不是 2.x），我会努力将它翻译成 javascript，但为了尽快解决这个问题，这里是 ts：

interface IScope extends ng.IScope {
        showHeader: boolean;
    }
    export class IncodeHideHeaderDirective implements ng.IDirective {
        restrict = "AE";
        require: "ngModel";
        scope: Object;
        replace = true;
        link: ng.IDirectiveLinkFn | ng.IDirectivePrePost;
        oldy: number;
        justScrolled = false;


        constructor() {
            const self = this;
            this.link = (scope: IScope, element: ng.IAugmentedJQuery) =>
            {
                element.bind("scroll",
                    () => {
                        if (element[0].scrollTop > self.oldy) {
                            console.log("collapsing");
                            scope.$eval("showHeader=false");
                        }
                        else if (element[0].scrollTop < self.oldy)
                        {
                            console.log("expanding");
                            scope.$eval("showHeader=true");
                        }
                        self.oldy = element[0].scrollTop;
                    }
                );

                element.bind("load",
                () => {
                    console.log(scope);
                    this.oldy = element[0].scrollTop;
                });
            };
        }






        public static factory(): ng.IDirectiveFactory {
            const directive = () => new IncodeHideHeaderDirective();
            return directive;
        }


    }

    angular.module("incode.module")
        .directive("ixHeader", incode.directives.label.IncodeHideHeaderDirective.factory());

相当基本的东西。如何让滚动条停止做这些奇怪的事情？ 这是a fiddle demonstrating the problem。

Answer 1

这不是 Angular 的答案，但为什么不直接将标题栏从流程中删除，将其设为 position: fixed（或 absolute）？它不会导致主要内容的回流，并且您不会遇到任何问题。

.slideUp {
    /* ... */
    position: fixed;
}

https://jsfiddle.net/e8j938g8/3/