Antd弹窗打开关闭前后页面会发生偏移，Chrome和FireFox浏览器在滚动条方面的显示差异

最新推荐文章于 2024-12-27 16:39:38 发布

原创最新推荐文章于 2024-12-27 16:39:38 发布 · 744 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#chrome #firefox #前端 #react.js #javascript

文章讲述了在项目中使用AntdModal时，Chrome与Firefox浏览器关于页面宽度变化的问题。Chrome的滚动条导致页面移动，而Firefox则包含滚动条在内。通过设置`overflow:auto`属性，解决了Chrome的问题，但滚动条样式需要调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、问题描述：在项目中，使用Antd的Modal组件，打开前后会出现页面宽度变化，从而看见页面横向移动

二、分析：

1. Chrome浏览器会发生这个问题，而firefox浏览器不会；

2. Chrome的滚动条比firefox粗很多，即使滚动条粗细不同，那firefox也有滚动条呀，那为啥它一点变化都没有呢？

3. 通过观察html元素的宽度，可以发现firefox浏览器的html元素宽度是包含了滚动条，而chrome浏览器的html元素的宽度不包含滚动条。

三、结论：我猜测是，打开弹窗的时候，由于页面滚动条的消失，导致html元素可用宽度增加了一个滚动条的宽度，那是不是说明，如果chrome能像Firefox一样，将滚动条计算在页面宽度之内，就可以解决。

四、解决方案：

overflow有个属性auto属性(其实看overflow的overlay属性的解释更合适，但是被官方废弃了)

html,
body,
#root {
  height: 100%;
  overflow: auto;
}

设置完上面的属性以后，我的问题就解决了，不过在Chrome浏览器中，我的项目的滚动条实在是太丑了，这个也是可以修改的，如下图所示

- Chrome浏览器

html,
body,
#root {
  height: 100%;
  /* 滚动条轨道*/
  ::-webkit-scrollbar-track { background-color: #e0e0e0;  }
  /* 横向滚动条隐藏就是height为0， 纵向滚动条隐藏就是width为0，整根滚动条的样式*/
  ::-webkit-scrollbar {  width: 0px;height:10px; border-radius: 5px;  }
  /* 滚动条的滑块*/
  ::-webkit-scrollbar-thumb { /* */background: #c0c0c0;border-radius: 5px; }
  /* 同时有垂直滚动条和水平滚动条时交汇的部分*/
  ::-webkit-scrollbar-corner{ background-color: #F5F5F5;}
  /* 当鼠标悬停在滚动条上时滑块的颜色 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  //}
  overflow: auto;
}

- Firefox浏览器

  overflow: auto;
  scrollbar-color: #e0e0e0 #c0c0c0; //滚动条轨道颜色   滚动条滑块的颜色
  scrollbar-width: none; // auto	系统默认的滚动条宽度。thin系统提供的瘦滚动条宽度，或者默认滚 
  动条宽度更窄的宽度。none	不显示滚动条，但是该元素依然可以滚动。