不要滚动元素调整大小

Posted 2023-03-05

【中文标题】不要滚动元素调整大小

【英文标题】：Don't scroll on element resize

【发布时间】：2016-12-23 00:46:02

【问题描述】：

我正在制作一个角度指令，当用户在元素 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。

【问题讨论】：

如果你在jsfiddle中做一个MVCE，会更容易找到问题。

我下班的时候会做，当我有正式的事情要做时，从复杂混乱的模板中提取太麻烦了。

@rm4 得到了你订购的小提琴

【参考方案1】：

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

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

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

【讨论】：

因为它会切断卡上的内容。 (i.gyazo.com/2646f80bb6038ab8bc26421400edc882.png) 我实际上曾经这样做过，但是我需要一个分隔 div 或一个边距，它会重现相同的问题，只是使用不同的元素。