身体 { 溢出-x：隐藏；打破位置：粘性答案

【问题标题】：body { overflow-x: hidden; } breaks position: sticky身体 { 溢出-x：隐藏；打破位置：粘性
【发布时间】：2018-04-16 04:12:27
【问题描述】：

我有一个元素，我正在使用粘性位置进行粘性：

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

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

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

body {
  overflow-x: hidden;
}

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

【问题讨论】：

请注意，按照规范，粘性在溢出的元素内部不起作用：隐藏或自动。另外，position: sticky 是一个实验性 API，不应该在生产中使用，只是提醒一下（如果您还没有意识到这一点）请参阅： developer.mozilla.org/en-US/docs/Web/CSS/position#sticky
是的，不知道，谢谢您指出这一点
我能够解决此问题的唯一方法是使用 overflow-x: initial; 之类的东西取消设置 overflow-x。一年后，position: sticky 不再是实验性的，并且可以跨浏览器工作（减去好的 ol' IE）:)

标签： html css css-position

【解决方案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。

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

还要仔细检查是否在 body 和 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>

【讨论】：

目前（Firefox 78、Chrome 84）这似乎不再起作用。通过切换 body 元素上的 overflow-x:hidden 属性进行验证。
"简单的解决方案是从你想要位置的元素的每个祖先中删除或取消设置溢出-x：隐藏；" body 标签不是每个元素的祖先吗？

【解决方案2】：

粘性在溢出的元素内部不起作用：隐藏或自动。参考这个https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky

可以使用此library 解决方法

【讨论】：

嗯，您建议 OP 参考的链接没有提及 position: sticky 如何在带有 overflow: hidden/auto 的元素中不起作用 - MDN 文档可以，但不在您的部分已经锚定到。此外，当您重复在 cmets 中已经建立的内容时，您似乎只是在尝试建立声誉。
你是对的，但在上面的定义中我刚刚更正了，谢谢
如何同时运行 body {overflow-x: hidden} 和 child is position: sticky

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

隐藏了垂直滚动条

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

【讨论】：

【解决方案5】：

这就是我让它为我工作的方式：
创建一个应该包含所有其他页面元素的父包装器/容器元素，并使用overflow-y: auto 和overflow-x: hidden 为其提供固定高度（主要是height: 100vh），如代码中所述/下面是sn-p ..
并让 body overflow: hidden 避免任何额外的滚动条..

此解决方案可能会带来一些后果/限制，例如：
如果您习惯于在 html 元素中使用 CSS scroll-behavior 属性，则需要将其移动到 #page_wrapper 元素中..

body {
  margin: 0;
  overflow: hidden;
}

.page-wrapper {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.sticky {
  position: sticky;
  left: 0;
  padding: 4px;
  text-align: center;
  background-color: forestgreen;
}

.sticky-header {
  top: 0;
}
.sticky-footer {
  bottom: 0;
}

.long-content {
  padding: 2rem;
  min-height: 100vh;
}

.break-overflow-x {
  min-width: 200vw;
  padding: 2rem;
  background-color: red;
}

<body>
  <div class="page-wrapper">
    <div class="sticky sticky-header"><button>Sticky Header</button></div>
    <div class="long-content">Long vertical content</div>
    <div class="break-overflow-x">Long horizontal content</div>
    <div class="long-content">Long vertical content</div>
    <div class="sticky sticky-footer"><button>Sticky Footer</button></div>
  </div>
</body>

【讨论】：

【解决方案6】：

你可以试试下面的...

#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>

【讨论】：

【解决方案7】：

对于那些有同样问题的人。我将overflow: hidden 添加到包含所有内容的标题下方的 div 中。

 <div class="header" style="position: sticky;">
        //navs
 </div>
 <div class="content-div" style="overflow: hidden;">
       //contents 
 </div>

【讨论】：