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

在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-widthscrollbar-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标签充满活力。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值