Firefox滚动条在Win10和Win11下表现不一致问题?

文章目录

前言

最近在写页面的时候发现一个非常有意思的事。Firefox滚动条在Win10和Win11下表现居然不一致。在网上几经查找资料, 终于找到原因所在。总结成下面的文章,加深印象也防止下次遇到。

总结

参考文章:
Firefox滚动条在Win10和Win11下表现不一致问题?

如下面

win10系统下,Firefox的滚动条会占用页面宽度,是一种比较粗的滚动条,很原始

win11系统下,则反之,不会占用页面宽度,是一种细小的滚动条,鼠标放在上面会有一个focus 效果(放大),比较接近现在

根本原因:查了一下出处,疑似是 Firefox 97 版本的一次针对 win11 的更新导致

上面说的还只是滚动条问题,仔细研究会发现,同样的Firefox浏览器 都是最新版在win10 和win11 上样式居然不一样,也是很神奇了。

解决方法

1.使用CSS媒体查询

可以使用CSS媒体查询来根据窗口宽度调整滚动条的样式,例如

javascript 复制代码
@media screen and (max-width: 1024px) {
  /* 在窗口宽度小于等于1024px时应用以下样式 */
  ::-webkit-scrollbar {
    width: 10px;
  }
}

@media screen and (min-width: 1025px) {
  /* 在窗口宽度大于1024px时应用以下样式 */
  ::-webkit-scrollbar {
    width: 8px;
  }
}

2.使用JavaScript

使用JavaScript来实现这个功能,您可以通过检查窗口的innerWidth属性来确定窗口的宽度,并据此设置滚动条的宽度,例如

javascript 复制代码
window.addEventListener('resize', function() {
  var scrollbarWidth = window.innerWidth > 1024 ? 8 : 10;
  document.documentElement.style.setProperty('--scrollbar-width', scrollbarWidth + 'px');
});

然后在CSS中,可以使用var()函数来引用这个变量,例如:::-webkit-scrollbar { width: var(--scrollbar-width); }

3.使用第三方库

还可以考虑使用第三方库来处理滚动条的样式。例如,您可以使用"SimpleBar"或"Perfect Scrollbar"等库,这些库提供了更多的配置选项和更好的兼容性。

4.直接使用以下代码

直接使用以下代码,这样应该所有scroll都不占了,这种方法还没有试过,可以尝试。

javascript 复制代码
body,html{
    overflow: scroll;
}
相关推荐
老坛0019 分钟前
2025决策延迟的椭圆算子分析:锐减协同工具的谱间隙优化
前端
老坛00110 分钟前
从记录到预测:2025新一代预算工具如何通过AI实现前瞻性资金管理
前端
今禾13 分钟前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐17 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价18 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花19 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb101319 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树20 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js
不要进入那温驯的良夜21 分钟前
跨平台UI自动化-Appium
前端
海底火旺22 分钟前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js