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

火狐滚动轴样式

写个程序换个饼 发布于

> 表格组件gridmanager在发布完固定列功能后,有位使用者通过github提交了[issues](https://github.com/baukh789/GridManager/issues/158),反馈其在firefox中表格发现表头错位BUG。 ## 排查原因 调试定位后,发现是由于组件中配置了如下代码: ```css ::-webkit-scrollbar { background: transparent; width: 10px; height: 10px; } ``` 然而firefox并不支持`-webkit-scrollbar`属性,因此在windows环境下Y轴滚动条宽度为17px。 mac环境下的firefox并不会出现这种情况,这是因为mac环境下滚动轴为浮起状态。 ### 解决步骤 虽然说编程最难的是找到问题点,但这往往也是一种自我安慰罢了。 #### 寻找替代样式 > 这无疑是最好的一种解决方式,当然前提是firefox存在`-moz-scrollbar`属性。 在各个前端人员汇集地翻腾了许久,并没有发现可行的css方案。 在差点就去用js去实现一个模拟滚动条的时候,想到了另外一个解决思路: 通过js动态获取滚动轴宽度。 #### 动态获取滚动轴宽度 ```javascript 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](https://developer.mozilla.org/zh-CN/docs/Web/CSS/scrollbar-width)和[scrollbar-color](https://developer.mozilla.org/zh-CN/docs/Web/CSS/scrollbar-color),并通过这两个属性解决了样式问题。 - scrollbar-width: 用于调整firefox滚动轴的宽,只有三个选项,不支持自定义像素值。 - scrollbar-color: 用于调整firefox滚动轴的颜色,支持自定义颜色值。 ```css .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标签充满活力。*** - [点击查看API](http://gridmanager.lovejavascript.com/index.html) - [点击查看源码](https://github.com/baukh789/GridManager)