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

23,450 阅读3分钟

前言

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

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

GIF 2023-8-28 11-23-25.gif

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

正文

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

我们的代码是这样写:

  <style>
  .box {
    width: 630px;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;  /* 注意⚠️ */
    height: 40vh;
    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属性,滚动条不会占据空间,而是悬浮在页面之上,刚好吻合了产品的需求。

image.png

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

简写代码如下:

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

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

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

直接这次bug的出现。

排查

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

然后我看了我的chrome的版本,是113版本

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

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

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

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

image.png

具体说明:

image.png

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

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

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

image.png

解决方案

第一种方式

既然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 {
    width: 636px;  /* +6px是预留滚动条的宽度,可变 */
    overflow: auto; /* 注意⚠️ */
    display: flex;
    flex-wrap: wrap;
    height: 40vh;
    box-shadow: 0 0 5px rgba(93, 96, 93, 0.5);
  }
  .box::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
  .box:hover::-webkit-scrollbar-thumb {
    background-color: #d6d6d6;
  }

效果如下图所示:

GIF 2023-12-28 10-58-21.gif

第二种方式

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

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

总结

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

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