通过样式调整火狐滚动轴样式

最新推荐文章于 2022-05-07 15:34:34 发布

写个程序换个饼

最新推荐文章于 2022-05-07 15:34:34 发布

阅读量377

点赞数

CC 4.0 BY-SA版权

分类专栏：经验总结文章标签： css javascript

本文链接：https://blog.youkuaiyun.com/iteye_17835/article/details/106144189

经验总结专栏收录该内容

32 篇文章

订阅专栏

在Firefox中，表格组件gridmanager出现表头错位问题，原因是Firefox不支持某个CSS属性。通过动态获取滚动轴宽度并利用`scrollbar-width`和`scrollbar-color`属性调整样式，解决了不同浏览器滚动轴样式差异。同时，更新了工具函数以适应Firefox的滚动轴宽度变化。

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

表格组件gridmanager在发布完固定列功能后，有位使用者通过github提交了issues，反馈其在firefox中表格发现表头错位BUG。

排查原因

调试定位后，发现是由于组件中配置了如下代码:

::-webkit-scrollbar {
	background: transparent;
	width: 10px;
	height: 10px;
}

然而firefox并不支持-webkit-scrollbar属性，因此在windows环境下Y轴滚动条宽度为17px。

mac环境下的firefox并不会出现这种情况，这是因为mac环境下滚动轴为浮起状态。

解决步骤

虽然说编程最难的是找到问题点，但这往往也是一种自我安慰罢了。

寻找替代样式

这无疑是最好的一种解决方式，当然前提是firefox存在-moz-scrollbar属性。

在各个前端人员汇集地翻腾了许久，并没有发现可行的css方案。

在差点就去用js去实现一个模拟滚动条的时候，想到了另外一个解决思路: 通过js动态获取滚动轴宽度。

动态获取滚动轴宽度

export const getScrollBarWidth = _ => {
    const el = document.createElement('div');

    el.style.width = '100px';
    el.style.height = '100px';
    el.style.overflow = 'scroll';

    getDiv(_).get(0).appendChild(el); // getDiv是组件内部方法，如果需要使用这段代码可以将getDiv(_).get(0)替换为其它dom节点

    const width = el.offsetWidth - el.clientWidth;

    // 将添加的元素删除
    el.remove();
    return width;
};

当高度达到Y轴显示条件时，通过getScrollBarWidth()获取的宽度值去动态的调整列宽。

到了这一步，BUG也就修复了。

但有个问题依旧没有绕过去: chrome与firefox的滚动轴样式差异依旧存在。

再次寻找替代样式

众所周知windows下的滚动条，那真不是一个简简单单的丑字可以概括的。

最终在MDN上找到了scrollbar-width和scrollbar-color，并通过这两个属性解决了样式问题。

scrollbar-width: 用于调整firefox滚动轴的宽，只有三个选项，不支持自定义像素值。
scrollbar-color: 用于调整firefox滚动轴的颜色，支持自定义颜色值。

.table-div{
    // 火狐修改滚动条: 以下为firefox特有属性
    scrollbar-width: thin;
    scrollbar-color: #e1e1e1 #f3f3f3;
}

样式添加后，在window和mac环境下分别测试了chrome和firefox，滚动轴样式已大致相同。

但由于在样式中添加了scrollbar-width: thin，导致之前写的工具函数getScrollBarWidth()在firefox下获取的宽度与实际宽度不匹配(获取值为17px, 而实际值为8px)。

到了这一步改起来就非常简单了，只需要在getScrollBarWidth中增加el.style.scrollbarWidth = 'thin'使函数与样式保持同步即可。

写在最后

gridmanager立项于2015年初，现已支持Angular-1.x, React, Vue 及 jQuery和原生编码方式，大家可以尝试使用下。

快速、灵活的对Table标签进行实例化，让Table标签充满活力。