Question

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

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

我的指令是用typescript（angular version 1.5.7 NOT 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/

不要滚动元素调整大小

1 个答案: