safari 表格同时设置x和y滚动会出现两条滚动条

[xianwei-lu]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://ant.design/components/table-cn/

Steps to reproduce

在safari打开网址，锁定到“表头分组”示例，左右滑动，会出现两个左右滚动的滚动条

What is expected?

只在底部有一条

What is actually happening?

在title和data下方各出现一条

Environment	Info
antd	3.11.6
React	16.7.0
System	Mac OS
Browser	10.1.2

---

当将表头的overflow关闭后正常，即class = "ant-table-header"的overflow属性

[afc163]

滚动条是有用的，这样无论在表头还是 body 里滚动，都可以联动滚动。

[xianwei-lu]

但是这样看起来很怪，可以将表头部分的滚动条隐藏，这样不影响功能

[afc163]

其实代码是隐藏的，你可以试试其他浏览器，已知情况是 safari 无论用什么办法也隐藏不了。另外，外接显示屏也会显示出来。目前我暂时没有找到可行的解决办法。

[afc163]

暂时先关了，你有好的解决方案也可以尝试一下，然后给我们 PR 或者继续在此回复就好。

[xianwei-lu]

.ant-table-header::-webkit-scrollbar {
display: none !important;
}
我尝试了这个，可以解决这个问题

[afc163]

这样可能会导致列头对齐问题。#4637 (comment)

[xianwei-lu]

尝试了chrome和safari都正常，列是否fixed的两种也尝试了，未发现对齐问题

[afc163]

你的场景不会有问题，是 windows 电脑或者开启了固定滚动条的情况，你可以测试一下。

这个问题目前 chrome 不存在，这段能否只针对 safari 生效，这样感觉可以一试。

[xianwei-lu]

身边没有条件测试windows，如果此问题只在safari出现，可以针对性处理

[afc163]

试一下开启了固定滚动条的情况，来个 PR 我也看看预览效果

[xianwei-lu]

只要加上
.ant-table-header::-webkit-scrollbar {
display: none !important;
}
我在本地各种固定都试了，safari和chrome都没问题，你可以在直接在本地就可以测试效果

[afc163]

[xianwei-lu]

之前我理解有误，将这里设为始终后，对于滚动条还是一条，但是出现了对齐问题

[afc163]

是的，应该还会有垂直列对齐的问题。这里反复改过好几年了，比较复杂，轻易不敢乱动。欢迎继续探索，还是先关了。

[xianwei-lu]

刚才研究了下，有这么一种解决方案
首先获取第一行的getBoundingClientRect().top，与它上方元素的clientHeight之和对比
如果前者比后者大(可以设一个误差)，滚动条伪元素设为“display: none”
反之设为“opacity: 0”
我本地测试了两种浏览器，都可行(发现Table是后续渲染的，计算过程用setTimeout异步)

[afc163]

来个 PR 吧，我也帮忙多测测。

[xianwei-lu]

昨天我回去试了下windows(Edge和chrome)，没有出现对不齐的问题，今天在你们官网demo上试了一下，本地测试正常，我把改的地方发出来，你可以在本地改了试试

[xianwei-lu]

[1120340041]

@xianwei-lu 可以给具体demo吗哥们？

[shen-lan]

IE下也是多个滚动条 .....

[afc163]

4.0 里已经修复，3.x 里不再跟踪了。