应用 vw 所产生的难题
现阶段区块链总宽是 1500px，为垂直居中合理布局，需要给区块链加一张布满全部屏幕宽度的背景图。表明：该网页是架构根据 mdx 文档产生的，故不能将 banner 原素总宽直设为整屏
一般来说，大家能让img相对定位就可以实现实际效果，编码如下所示。
<div class="parent">
<img class="img-bg" />
<div>...</div>
</div>
.parent {
position: relative;
}
.img-bg {
position: absolute;
left: calc(50% - 50vw);
top: 0;
width: 100vw;
height: 100%;
}
但是，一旦当前页出现纵向下拉列表，你就会发现同时还会多一个横着下拉列表，这是从哪里来的呢？
vw
在标准中大家可以看到这一段叙述，换句话说下拉列表一般不会危害 vw 企业计算出来的，其自始至终都是基于视口总宽计算出来的，有没有下拉列表 vw 总宽一致，但是内部结构原素是要被下拉列表压缩空间的！其实就是设定img宽为100vw的时候是超出具体内容宽度，这就是发生水准下拉列表的主要原因。
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, any scrollbars are assumed not to exist.
问题解决
- 最先当前页是否存在下拉列表是不确定性的，无论是否有下拉列表都要适配展现，可是下拉列表会影响到 vw 企业，大家在预估宽度和 left 的时候是需要把下拉列表考虑在内的
- 换句话说，我们应该了解当前页是否具备下拉列表，再对于二种情景做解决。一般情况下，应用
document.body.scrollHeight > window.innerHeight就可以确定。但在 IE7，IE8 中window.innerHeight为underfined，因此为了兼容 IE7、IE8，需要用到document.documentElement.clientHeight特性测算对话框相对高度。
const hasScrollbar = () => {
return (
document.body.scrollHeight >
(window.innerHeight || document.documentElement.clientHeight)
);
};
const getScrollbarWidth = () => {
const container = document.createElement("div");
document.body.appendChild(container);
container.style.overflow = "scroll";
const inner = document.createElement("div");
container.appendChild(inner);
const width = container.offsetWidth - inner.offsetWidth;
document.body.removeChild(container);
return width;
};
- 大家可以在网页页面复位时实行一下这俩函数公式，并保存在
state中，原素款式依据下拉列表状况做适配就可以。延迟 500ms 是为了给页面元素尽可能加载完成。
const [isHaveScrollbar, setIsHaveScrollbar] = useState(false);
const [scrollbarWidth, setScrollbarWidth] = useState(15);
React.useEffect(() => {
setTimeout(() => {
setIsHaveScrollbar(hasScrollbar());
setScrollbarWidth(getScrollbarWidth());
}, 500);
}, []);
<div
style={{
width: isHaveScrollbar
? `calc(100vw - ${scrollbarWidth}px)`
: "100vw",
left: isHaveScrollbar
? `calc(50% - 50vw ${scrollbarWidth / 2}px)`
: "calc(50% - 50vw)",
}}
>...</div>
汇总
到此，大家适配了不一样系统软件，不一样电脑浏览器，是否存在下拉列表的现象，应用 vw 再也不会造成布局问题了。之上是一个粗略地解决方案，但是对于我现阶段的使用场景就足够了。
- 实际上大家可以在测算滚动条宽度后把它设为 css 自变量，只需在 layout 中实行一次即可，便捷各个地方应用。
- 次之，延迟 500ms 实行在某些特殊场景中并不可靠，例如页面上有不明相对高度的照片原素，并且在 500ms 内未加载完成，那样也会导致是否存在下拉列表的分析结论有误，这样的情况下我们能监视图形的载入，所有图片加载结束后再度实行判断函数，以确保情况恰当。