我是真的不会用 vw，vw 爬啊

发表于 更新于
本文字数： 1k 阅读时长 ≈ 1 分钟

写个商城静态页练练手，又想要版心，又想用 grid 布局，要致富，先撸树，砰砰砰写好了

后来又想在 gird 的两行中间弄一条线分隔一下。

第一想到用 border-bottom，可是这玩意跑不出 gird 的手掌心啊，我要的 bar 可是要横穿整个页面哦。

算了，没有什么是定位解决不了的，如果有就砸键盘！！

1
<div class="bar"></div>
1
2
3
4
5
6
7
8
9
.bar{
  top:100%;
  left:50%;
  transform:translateX(-50%);
  position:absolute;
  width:100vw;
  height:2px;
  background-color:red;
}

哪个元素下面需要横线，就塞个 <bar> 进去。

信心满满，一刷新，emmmmmmm… 怎么跑出了一个横向滚动条。

这不对吧队长，又是谁想陷害我呀。

耐心想了一下，100 vw 就是个憨憨长度。如果出现了纵向滚动条，100vw 就会被遮住，所以又要出现横向滚动条来显示遮住的部分。就是 100vw 包含了被纵向滚动条遮住的部分。

可是我这个 bar 又在盒子内，又想横穿屏幕，怎么也得 100vw 才能满足吧，僵住了哟。

白送的总没好东西，又没好办法，只好自己弄一个 vw 了

1
2
3
4
5
6
function setVw(){
  const vw = document.documentElement.scrollWidth / 100
  document.documentElement.style.setProperty('--vw',`${vw}px`)
}
window.addEventListener('DOMContentLoaded',setVw)
window.addEventListener('resize', setVw)

在 main.js 入口文件塞个函数，获取 body 宽的百分之一，然后作为自定义的 CSS 属性

后续再改一下 bar 的宽度

1
2
3
4
5
6
7
8
9
.bar{
  top:100%;
  left:50%;
  transform:translateX(-50%);
  position:absolute;
  width: calc(var(--vw,1vw) * 100);
  height:2px;
  background-color:red;
}

暂时是丑陋地解决了，欸。