我有一个元素,我正在粘贴位置粘贴：
#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%;
}
