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

发布时间：2020-12-14 22:40:12 所属栏目：资源来源：网络整理

导读：我有一个元素,我正在粘贴位置粘贴： #header { position: sticky; width: 100vw; top: 0;} 这工作正常,但我意识到,如果我使用： body { overflow-x: hidden;} 这打破了粘性,我需要将body overflow-x设置为隐藏,如何解决这个问题,只有CSS解决方案,没有JS解决

我有一个元素,我正在粘贴位置粘贴：

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


这工作正常,但我意识到,如果我使用：

body {
  overflow-x: hidden;
}

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


最佳答案
更新：
这已经在Safari v12.0.2,Firefox v64.0和Chrome v71.0.3578.98上成功测试过
添加职位：-webkit-sticky;用于Safari.
不幸的是,规范并不太清楚overflow-x：hidden的含义;在位置粘,但有一种方法来解决这个问题.值得庆幸的是,有一个问题可以解决这个问题：https://github.com/w3c/csswg-drafts/issues/865.
简单的解决方案是删除或取消设置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%;
}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!