当前位置: 首页 > Web前端 > CSS

通过样式

时间:2023-03-30 18:00:52 CSS

表格组件gridmanager调整Firefox滚动轴的样式发布固定列功能后,有用户通过github提交了一个issue,反馈发现在firefox中表格表头错位的bug.经过排查定位,发现在component::-webkit-scrollbar{background:transparent;中配置了如下代码宽度:10px;height:10px;}但是firefox不支持-webkit-scrollbar属性,所以在windows环境下,Y轴滚动条的宽度为17px。mac环境下的firefox不会出现这种情况,因为在mac环境下滚动轴是浮动状态。解决步骤虽然都说编程中最难的是发现问题,但这往往是一种自我安慰。寻找另一种风格无疑是最好的解决方案,当然前提是firefox有-moz-scrollbar属性。在各个前端人员折腾了半天,也没有找到可行的css方案。在差点用js实现一个模拟滚动条的时候,想到了另一种解决方案:通过js动态获取滚动轴的宽度。动态获取滚动轴宽度exportconstgetScrollBarWidth=_=>{constel=document.createElement('div');el.style.width='100px';el.style.height='100px';el.style.overflow='滚动';getDiv(_).get(0).appendChild(el);//getDiv是组件内部方法,如果需要使用这段代码,可以将getDiv(_).get(0)替换成其他dom节点constwidth=el.offsetWidth-el.clientWidth;//删除添加的元素el.remove();返回宽度;};当高度达到Y轴显示条件时,使用getScrollBarWidth()获取的宽度值动态调整列宽。至此,BUG将得到修复。但是还有一个问题没有绕过:chrome和firefox的滚动轴样式的区别依然存在。再次寻找另类风格,windows下众所周知的滚动条真的不是一个简单的丑字可以概括的。最后在MDN上找到了scrollbar-width和scrollbar-color,通过这两个属性解决了样式问题。scrollbar-width:用于调整firefox滚动轴的宽度,只有三个选项,不支持自定义像素值。scrollbar-color:用于调整firefox滚动条的颜色,支持自定义颜色值。.table-div{//修改Firefox中的滚动条:以下是Firefox特有的属性scrollbar-width:thin;scrollbar-color:#e1e1e1#f3f3f3;}添加样式后,分别在window和mac环境下测试chrome和firefox。滚动轴样式基本相同。但是由于在样式中添加了scrollbar-width:thin,所以之前在firefox下写的工具函数getScrollBarWidth()得到的宽度与实际宽度不符(得到的值为17px,而实际值为8px)。此时,要改变就很简单了,只需要在getScrollBarWidth中添加el.style.scrollbarWidth='thin',就可以保持功能和样式的同步。写在最后gridmanager项目成立于2015年初,目前支持Angular-1.x、React、Vue和jQuery以及原生编码方式,大家可以尝试使用。快速灵活实例化Table标签,让Table标签充满活力。点击查看API点击查看源码