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

概述我有一个元素,我正在粘贴位置粘贴：#header { position: sticky; width: 100vw; top: 0; } <app-header id='header'></app-header> 这工作正常,但我意识到,如果我使用：body { overflow-x: hidden; }

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

#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%;}

总结

以上是内存溢出为你收集整理的html – body {overflow-x：hidden;打破位置：粘滞全部内容，希望文章能够帮你解决html – body {overflow-x：hidden;打破位置：粘滞所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1119295.html