Question

所以position: sticky很棒，对吧？ Angular也是如此，对吗？结合使用Firefox和Chrome效果很好。问题始于Safari。

如果您构建一个其中包含position: sticky div作为模板中第一个元素的Angular组件，则Safari不知道如何处理它。示例：

AppComponent：

@Component({
  template: '<sticky-component></sticky-component>'
})
export class AppComponent {}

StickyComponent：

@Component({
  selector: 'sticky-component',
  template: '<div class="sticky">Should be sticky</div>',
  styles: [
    `
      .sticky {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
      }
    `
  ]
})
export class StickyComponent {}

这将生成一个DOM，例如：

...
<sticky-component>
  <div class="sticky"></div>
</sticky-component>
...

如果您实际上不使用<sticky-component>写出HTML ，那么它在Safari中效果很好。但是，由于sticky元素的父元素是host元素，因此失败。尝试将粘性CSS添加到host元素似乎也不起作用。有没有人遇到过这个问题或有任何解决方案？我知道我可以使用Angular中的事件侦听器来实现此粘性功能，但是position: sticky非常容易。

StackBlitz示例：https://stackblitz.com/edit/angular-jede8a（在Chrome / Firefox中有效，但在Safari中无效）

Answer 1

^{_{这更多是一种解决方法，可能不适合您的需求，但我猜它应该得到答案，因为它确实可以解决问题（不一定以您的方式喜欢它）。}}

如果Safari的问题是DOM中使用的自定义元素（带短划线），则可以通过指定其他选择器来消除此问题。代替

rename(Paths.get("h:/gadm"))

您可以拥有

selector: 'sticky-component',

，然后通过添加属性来使用该组件。

selector: 'div[sticky-component]',

尽管在此用例中肯定不是理想的方法，但这是定义组件的有效方法。实际上，通常是使用自定义按钮完成的-例如，Material本身使用以下模式：<div sticky-component></div>。

Answer 2

不确定内联样式。但是，如果您将样式移动到外部文件。以下应该可以解决问题。

 :host {
    .sticky {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
    }
 }

Answer 3

首先要在野生动物园中进行粘性工作，您需要使用position: -webkit-sticky;，但是.....

经过大量测试和戳后，将position:sticky放入嵌套元素中对于Safari来说根本不可行。 codepen中的这篇this帖子就是一个很好的例子，用以检查我的行为方式。

为此，webkit中有一个错误reported，其中还包括我尚未完全理解的测试。

接下来的问题是，您将它放入嵌套元素的原因是什么？你可以解决这个问题吗？

Answer 4

对我来说，它使用模板中设置的 div 属性将粘性选择器包装在 height 中。


    @Component({
        selector: 'sticky-component',
        template: 
           `<div style="height: 100%">
              <div class="sticky">Should be sticky</div>
            </div>
           `,
        styles: [
           ` .sticky {
                 position: -webkit-sticky;
                 position: sticky;
                 top: 0;
            }`
        ]
     })
     export class StickyComponent {}

带有Angular组件的Safari中的粘性位置

4 个答案: