angular - 使用 Angular 组件在 Safari 中的粘性位置

Question

所以，position: sticky很棒，对吧？ Angular 也是，对吧？将两者与 Firefox 和 Chrome 一起使用效果很好。问题始于 Safari。

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

应用组件:

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

粘性组件:

@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 中运行良好。但是由于粘性元素的父元素是宿主元素，所以失败了。尝试将粘性 CSS 添加到宿主元素似乎也不起作用。有没有人遇到过这个问题或有任何解决方案？我知道我可以在 Angular 中使用事件监听器来实现这个粘性功能，但是 position: sticky太容易了。

StackBlitz 示例:https://stackblitz.com/edit/angular-jede8a (适用于 Chrome/Firefox 但不适用于 Safari)

Answer 1

^{_{这更像是一种解决方法，可能不适合您的需求，但我想它值得一个答案，因为它确实解决了问题(不一定以您想要的方式喜欢它)。}}

如果 Safari 的问题是 DOM 中使用的自定义元素(带有破折号)，您可以通过指定不同的选择器来消除它。而不是

selector: 'sticky-component',

你可以

selector: 'div[sticky-component]',

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

<div sticky-component></div>

虽然在这个用例中肯定不理想，但这是定义组件的有效方法。事实上，它通常是通过自定义按钮完成的——例如，Material 本身使用这种模式:<button mat-button> .