el-scrollbar与el-table滚动条样式兼容Google、FireFox、IE10

记录贴，对自己遇到的问题做一个记录，刚接触前端1个月，有不对的地方希望各位大佬指出。

项目场景：

因为用户需求，需要兼容谷歌、火狐、IE10的滚动条样式，el-table组件只兼容谷歌，火狐与IE显示默认样式，样式不统一。使用el-scrollbar进行滚动条样式统一。

---

问题描述：

部分源代码如下图所示：（注：el-table中，height属性放到style里，height没有生效，目前没有找到原因，所以放在外边）

<el-table style="width:100%" height="25vh">
	<el-table-column>
		...略
	</el-table-column>
</el-table>

FireFox 和 IE 样式：

Google 样式：

添加el-scrollbar标签，el-scrollbar横向滚动条没有距离，el-table滚动条可以滑动且正常显示
例如：

<el-scrollbar style="height:28vh;width:1459px;">
	<el-table style="width:100%">
		<el-table-column>
			...略
		</el-table-column>
	</el-table>
</el-scrollbar>

IE和FireFox样式：

Google （无横向滚动条）：

---

原因分析：

el-scrollbar与el-table滚动条样式冲突，因为el-table标签自带滚动条，但是el-table生成滚动条样式不能兼容IE，所以需要使用el-scrollbar。

1.出现2个滚动条是因为没有隐藏其中一个滚动条。

2.el-scrollbar生成滚动条没有滚轮，横向滚轮没有定位到表格的横向距离。

---

解决方案：

1、因为IE和火狐在其他地方的滚动条都会显示横向滚动条,谷歌不会显示，在这里为了方便在全局添加了overflow-x: hidden;代码。

.el-scrollbar__wrap {
    
    
	overflow-x: hidden;
}

2、样式显示为：
IE和FireFox：

Google ：

3、通过F12定位查看边距，发现el-scrollbar无滑轮是因为没有定位到表格的宽度，尝试的在el-scrollbar和el-table之间加了一个div,设置了与表格相同的宽度，滑轮能正常出现，具体逻辑不太了解。

<el-scrollbar style="height:28vh;">
	<div style="width:2520px;">
		<el-table style="width:100%">
			...略
		</el-table>
	</div>
</el-scrollbar>

火狐、谷歌、IE样式：