文章目录
前言
最近在写页面的时候发现一个非常有意思的事。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;
}