html - 正文 { 溢出-x : hidden; } breaks position: sticky

Question

我有一个元素，我正在使用位置粘性设置粘性:

#header {
    position: sticky;
    width: 100vw;
    top: 0;
}

<app-header id="header"></app-header>

这很好用，但我意识到如果我使用:

body {
  overflow-x: hidden;
}

这打破了粘性，我需要将 body overflow-x 设置为 hidden，我该如何解决这个问题，只有 CSS 解决方案，没有 JS 解决方案？

Answer 1

将 overflow-x 属性设置为值 clip 帮助我实现位置粘性并防止滚动。

这里有更多的解释 this article