为什么我的页面鼠标一滑过，布局就错乱了？

前言

这天刚到公司，测试同事又在群里@我：
为什么页面鼠标一滑过，布局就错乱了？
以前是正常的啊？
刷新后也是一样
快看看怎么回事

同时还给发了一段bug复现视频，我本地跑个例子模拟下

可以看到，鼠标没滑过是正常的，鼠标一滑过图片就换行了，鼠标移出又正常了。

正文

首先说下我们的产品逻辑，我们产品的需求是：要滚动的页面，滚动条不应该占据空间，而是悬浮在滚动页面上面，而且滚动条只在滚动的时候展示。

我们的代码是这样写：

  <style>
  .box {
    width: 630px;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;  /* 注意⚠️ */
    height: 50vh;
    box-shadow: 0 0 5px rgba(93, 96, 93, 0.5);
  }
  .box:hover {
    overflow: overlay; /* 注意⚠️ */
  }
  .box .item {
   width: 200px;
   height: 200px;
   margin-right: 10px;
   margin-bottom: 10px;
  }
  img {
   width: 100%;
   height: 100%;
  }
  </style>
  <div class="box">
    <div class="item">
      <img src="https://p6.itc.cn/q_70/images03/20210422/229df67605934f719b5e2efe6f171d5f.jpeg" alt="">
    </div>
    <div class="item">
      <img src="https://p6.itc.cn/q_70/images03/20210422/229df67605934f719b5e2efe6f171d5f.jpeg" alt="">
    </div>
    <div class="item">
      <img src="https://p6.itc.cn/q_70/images03/20210422/229df67605934f719b5e2efe6f171d5f.jpeg" alt="">
    </div>
    <div class="item">
      <img src="https://p6.itc.cn/q_70/images03/20210422/229df67605934f719b5e2efe6f171d5f.jpeg" alt="">
    </div>
  </div>

我们使用了overflow属性的overlay属性，滚动条不会占据空间，而是悬浮在页面之上，刚好吻合了产品的需求。

然后我们在滚动的区域默认是overflow:hidden，正常时候不会产生滚动条，hover的时候把overflow改成overlay，滚动区域可以滚动，并且不占据空间。

简写代码如下：

  .box {
    overflow: hidden;  
  }
  .box:hover {
    overflow: overlay; 
  }

然后我们是把它封装成sass的mixins，滚动区域使用这个mixins即可。

上线后没什么问题，符合预期，获得产品们的一致好评。

直接这次bug的出现。

排查

我先看看我本地是不是正常的，我打开一看，咦，我的布局不会错乱。

然后我看了我的chrome的版本，是113版本。

然后我问了测试的chrome版本，她是114版本。

然后我把我的chrome升级到最新114版本，咦，滑过页面之后我的布局也乱了。

初步判断，那就有可能是chrome版本的问题。

去网上看看chrome的升级日志，看看有没有什么信息。

具体说明：

可以看到chrome114有了一个升级，就是把overflow:overlay当作overflow:auto的别名，也就是说，overlay的表现形式和auto是一致的。

实锤了，auto是占据空间的，所以导致鼠标一滑过，布局就乱了。

其实我们从mdn上也能看到，它旁边有个删除按钮，然后滑过有个tips：

解决方案

第一种方式

既然overflow:overlay表现形式和auto一致，那么我们得事先预留出滚动条的位置，然后设置滚动条的颜色是透明的，滑过才显示颜色，基本上也能符合产品的需求。

代码如下：

  // 滚动条
  ::-webkit-scrollbar {
    background: transparent;
    width: 6px;
    height: 6px;
  }
  // 滚动条上的块
  ::-webkit-scrollbar-thumb {
      background-clip: padding-box;
      background-color: #d6d6d6;
      border: 1px solid transparent;
      border-radius: 10px;
  }
  .box {
    overflow: auto;
  }
  .box::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
  .box:hover::-webkit-scrollbar-thumb {
    background-color: #d6d6d6;
  }

第二种方式

如果有用element-ui，它内部封装了el-scrollbar组件，模拟原生的滚动条，这个也不占据空间，而是悬浮，并且默认不显示，滑过才显示。

element-ui没有el-scrollbar组件的文档说明，element-plus才有，不过都可以用。

总结

这次算是踩了一个坑，当mdn上面提示有些属性已经要废弃⚠️ 了，我们就要小心了，尽量不要使用这些属性，就算当前浏览器还是支持的，但是不能保证未来某个时候浏览器会不会废弃这个属性。（比如这次问题，改这些问题挺费时间的，因为用的地方挺多的。）

因为一旦这些属性被废弃了，它预留的bug就等着你去解决，谨记！