背景。这是滚动条占用空间导致的bug。查了资料，终于解决了。顺便研究一下这个属性，做个总结，分享给大家。正文昨天，考试出了一道题。现象是某个输入框的焦点提示没有了。让我修复它。onFocus={()=>setFocusedInputName('guidePrice')}onBlur={()=>setFocusedInputName('')}/>没有代码有什么问题？它不是手动设置的。而且在我，另一个同事，和PM的PC上都OK：初步判断是红框位置的结算有差异，差异在17px左右。但有什么区别呢？生产？刚去测试我兄弟的电脑，注意到一个细节。在我的PC上，滚动条是浮动的：在他的PC上，滚动条占空间：在他的电脑上，手动设置原来的overscroll-y:scroll改为overscroll-y:overlay问题就解决了。由此判断为：滚动条占用空间导致的bug。overscroll-y：overlayCSS属性溢出，定义当元素的内容太大而无法容纳在块级格式化上下文中时要做什么。它是overflow-x和overflow-y的简写属性。/*默认值。内容不会被裁剪，渲染在元素框外*/overflow:visible;/*内容将被裁剪，其余内容将不可见*/overflow:hidden;/*内容将被裁剪，浏览器将显示滚动条以便查看其余内容*/overflow:scroll;/*由浏览器决定，如果内容被裁剪，将显示滚动条被显示*/overflow:auto;/*指定从父元素继承overflow属性的值*/overflow:inherit;官方描述：overlay的行为与auto相同，但滚动条绘制在内容之上而不是占用空间。仅在基于WebKit（例如Safari）和基于Blink（例如Chrome或Opera）的浏览器中受支持。Performance:html{overflow-y:overlay;}Compatibility我在caniuse上没有查到这个属性的兼容性问题，也有人提出这个问题：问题场景及解决方案1.外部容器的滚动条这里的外部容器指的是到html，直接在最外层添加：html{overflow-y:scroll;}手动添加这个功能，不管什么时候滚动宽度占空间。缺点：没有滚动的时候会有滚动条，不太美观。优点：方便，没有兼容性问题。2、外部容器的绝对定位方式使用绝对定位保证body的宽度不变：html{overflow-y:scroll;//兼容ie8，不支持:root,vw}:root{overflow-y:auto;overflow-x:hidden;}:rootbody{position:absolute;}body{width:100vw;overflow:hidden;}3.内胆兼容。包装器{溢出-y：滚动；//fallbackoverflow-y:overlay;}综上所述，我个人的建议是使用overlay，然后使用scroll作为覆盖。就这些了，希望对大家有所启发。文中如有错误，请在留言区指正，谢谢。关注我如果你觉得这篇内容对你很有启发，那就关注我吧~更多精彩：聊一聊ESM、Bundleless、Vite、Snowpack记得一个“无限列表”滚动优化“面试三招”代码分割（上）Cache的”“面试三轴”（上）“面试三轴”缓存（下）“面试三轴”HTTP（上）“面试三轴”HTTP（下）这篇“面试三轴”参考资料https://developer.mozilla.org...https://github.com/Fyrd/caniu...
