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

更新：

已在Safari v12.0.2，Firefox v64.0和Chrome v71.0.3578.98上成功进行了测试

为Safari添加了position: -webkit-sticky;。

不幸的是，规范对于overflow-x: hidden;对位置粘性的含义不太清楚，但是有一种解决方法。值得庆幸的是，有一个问题可以解决此问题：https://github.com/w3c/csswg-drafts/issues/865。

简单的解决方案是从您要拥有overflow-x: hidden;的元素的每个祖先中删除或取消设置position: sticky;。然后，您可以将overflow-x: hidden;放在身体上，它将起作用！

还要再次检查您在正文和html标签上都没有设置溢出，我在此处更深入地介绍了这些标签：https://stackoverflow.com/a/54116725/6502003

如果您想使用它，这里有一支笔：https://codepen.io/RyanGarant/pen/REYPaJ

/* 
  Try commenting out overflow on body style and uncommenting
  overflow on .overflow-x-hidden class and you will see 
  position sticky stop working!  
*/

body {
  overflow-x: hidden;
}

.overflow-x-hidden {
/*   overflow-x: hidden; */
  border: 1px solid blue;
}

h1 {
  background: palevioletred;
  color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.tall {
  background: linear-gradient(to bottom, paleturquoise, white);
  height: 300vh;
  width: 100%;
}

<div class="overflow-x-hidden">
  <h1>I want to be sticky!</h1>
  
  <div class="tall"></div>
</div>

Answer 2

粘贴在带溢出的元素内部不起作用：hidden或auto。请参阅此https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky

解决方法可以使用此library

Answer 3

不确定这是否有帮助，但我在移动设备上（页面会“溢出”并滚动超过边界）为此苦苦挣扎了很长时间，最终修复了它。

我尝试了 body {overflow: hidden;} 解决方案，但它会禁用我的粘性元素。因此，我创建了一个 <div class="container">，其中包含我在 <body> 内的页面的所有其他 div，并且似乎做到了！

Answer 4

您可以尝试以下操作吗...

#one { position: sticky; top: 10px; }* {
  box-sizing: border-box;
}
body{overflow-x: hidden;}
dl > div {
  background: #FFF;
  padding: 24px 0 0 0;
}

dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #CCC;
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/position -->

<dl>
  <div>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </div>
  <div>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </div>
  <div>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </div>
  <div>
    <dt>T</dt>
    <dd>Ted Leo &amp; The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </div>
</dl>

Answer 5

如果有人遇到类似问题，我只想在此处添加此内容。 position:sticky 对我不起作用，因为我们在平板电脑/移动设备屏幕分辨率上应用了 overflow-y:scroll。 overflow: 和 position:sticky 不能一起使用。此 article 解释了解决此问题的 2 种解决方法。我在桌子上设置了一个固定的高度，然后用

隐藏了垂直滚动条

::-webkit-scrollbar {
  width: 0;  
  background: transparent;  
}::-webkit-scrollbar {
  width: 0;  
  background: transparent;  /* 
}

body {overflow-x：hidden;打破位置：粘滞

5 个答案:

更新：