Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

表格纵向滚动后在有滚动条的浏览器中列表会出现奇奇怪怪的对不齐 #19952

Closed
fwtcumt opened this issue Nov 27, 2019 · 17 comments · Fixed by #19986
Closed

表格纵向滚动后在有滚动条的浏览器中列表会出现奇奇怪怪的对不齐 #19952

fwtcumt opened this issue Nov 27, 2019 · 17 comments · Fixed by #19986

Comments

@fwtcumt
Copy link

@fwtcumt fwtcumt commented Nov 27, 2019

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

Reproduction link

https://ant.design/components/table-cn/#components-table-demo-fixed-columns-header

Steps to reproduce

在window系统中,给Table组件设置 scroll={y: 600} 后,给表格滑到最右边时,表格体和表头会有一个滚动条的错位。我已经发现原因了,因为纵向能滚动后,.ant-table-body 该元素有纵向的滚动条,而 .ant-table-header 没有纵向滚动条,这时候就完犊子啦。好吧,我就手动设置一下他们的滚动条宽度吧。这时候又引出一个小问题,就是设置横向滚动后,如果有左右列固定的情况,固定的列底部会有个17px的空位,我查了原因,应该是让出的17px是默认滚动条的宽度。我又手动给这个-17px的margin值去掉。然后表格完美运行。
随后发现,实际上并没有完美解决,在windows 谷歌上没事了,可是在Mac上出事儿了,一点点我设置的4px的距离没对齐,卧槽!

What is expected?

期望表格组件无论设置横向还是纵向滚动,都能平稳运行。并且对齐。

What is actually happening?

一旦设置纵向滚动,列对不齐。edge中表格体和头在滑动时有明显的延迟。

Environment Info
antd 3.25.3
React 16.11.0
System windows
Browser 谷歌、edge

我把我的解决代码放这里吧:
.ant-table {

//设置表格头部竖向滚动宽度
.ant-table-header::-webkit-scrollbar {
  width: 4px;
}

//设置表格体滚动宽度
.ant-table-body, .ant-table-body-inner {
  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #909090;
  }
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 4px;
    background: #EDEDED;
  }
}

//解决固定列底部预留的空隙
.ant-table-fixed-left, .ant-table-fixed-right {
  .ant-table-body-outer {
    margin-bottom: 0 !important;
  }
}

}

@ant-design-bot

This comment has been minimized.

Copy link
Contributor

@ant-design-bot ant-design-bot commented Nov 27, 2019

Hello @fwtcumt. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

你好 @fwtcumt, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。7 天内未跟进的 issue 将会被自动关闭。

@fwtcumt

This comment has been minimized.

Copy link
Author

@fwtcumt fwtcumt commented Nov 27, 2019

错位问题在edge上没有,只在Windows的谷歌浏览器上有。Windows的谷歌浏览器上官方表格示例中横竖滚动的例子就是错位的。我就不弄啥复现现场了。

@afc163

This comment has been minimized.

Copy link
Member

@afc163 afc163 commented Nov 27, 2019

能帮忙截一些图么?

@fwtcumt

This comment has been minimized.

Copy link
Author

@fwtcumt fwtcumt commented Nov 27, 2019

我的电脑是 华为metebook X Pro 2019,谷歌浏览器版本 78.0.3904.108。
一下是表格组件的几张截图:
横向滚时:
横向滚时
横向不滚时:
横向不滚时
官方demo1:
官方demo1
官方demo2:
官方demo2

@afc163

This comment has been minimized.

Copy link
Member

@afc163 afc163 commented Nov 27, 2019

看上去是 windows 滚动条宽度的计算有点问题。

@afc163

This comment was marked as resolved.

Copy link
Member

@afc163 afc163 commented Nov 28, 2019

Chrome 的版本号是多少?

@afc163

This comment has been minimized.

Copy link
Member

@afc163 afc163 commented Nov 28, 2019

我这里重现不出来,能麻烦查看下你本地控制台,发一下这里的 dom 结构出来么?

image

@fwtcumt

This comment has been minimized.

Copy link
Author

@fwtcumt fwtcumt commented Nov 28, 2019

我这里重现不出来,能麻烦查看下你本地控制台,发一下这里的 dom 结构出来么?

image

没问题,下班回家我发😂

@afc163

This comment has been minimized.

Copy link
Member

@afc163 afc163 commented Nov 28, 2019

找到原因了,在 windows chrome 下,对滚动条样式做任何修改都会导致其宽度变成 8px,少于标准的大概 15 ~ 17px。我想想办法。

afc163 added a commit that referenced this issue Nov 28, 2019
afc163 added a commit that referenced this issue Nov 28, 2019
@afc163 afc163 mentioned this issue Nov 28, 2019
5 of 14 tasks complete
@fwtcumt

This comment has been minimized.

Copy link
Author

@fwtcumt fwtcumt commented Nov 28, 2019

我这里重现不出来,能麻烦查看下你本地控制台,发一下这里的 dom 结构出来么?

image

好像不一样,我还是发一下吧
微信截图_20191128220956

@hanguihe

This comment has been minimized.

Copy link

@hanguihe hanguihe commented Nov 28, 2019

@afc163 我这边也有个类似的问题,但不是滚动条引起的。复现方法:表格多设置几个列,第一列和最后一列都设置fixed,x设置滑动,再设置可展开行。点击展开后,fixed的那两列严重不对齐。截图如下
截屏2019-11-28下午11 51 59

@fwtcumt

This comment has been minimized.

Copy link
Author

@fwtcumt fwtcumt commented Nov 29, 2019

@afc163 我这边也有个类似的问题,但不是滚动条引起的。复现方法:表格多设置几个列,第一列和最后一列都设置fixed,x设置滑动,再设置可展开行。点击展开后,fixed的那两列严重不对齐。截图如下
截屏2019-11-28下午11 51 59

噗哈哈哈哈哈哈😂,看来可折叠的表格不适合固定列[手动滑稽]

afc163 added a commit that referenced this issue Nov 29, 2019
close #19952
afc163 added a commit that referenced this issue Nov 29, 2019
close #19952
afc163 added a commit that referenced this issue Nov 29, 2019
close #19952
@fwtcumt

This comment has been minimized.

Copy link
Author

@fwtcumt fwtcumt commented Nov 29, 2019

微信截图_20191130000211
还是不行,放弃吧,这破Windows Chrome。

@afc163

This comment has been minimized.

Copy link
Member

@afc163 afc163 commented Nov 29, 2019

手头没 windows,周一找 @chenshuai2144 借一下再找找彻底的解决方案。当前暂时加上下面这段样式作为 workaround 应该可以修复。

.ant-table-hide-scrollbar::-webkit-scrollbar {
  width: 15px;
}
@fwtcumt

This comment has been minimized.

Copy link
Author

@fwtcumt fwtcumt commented Nov 29, 2019

手动没 windows,周一找 @chenshuai2144 借一下再找找彻底的解决方案。当前暂时加上下面这段样式作为 workaround 应该可以修复。

.ant-table-hide-scrollbar::-webkit-scrollbar {
  width: 15px;
}

NB了哥,我的电脑设置成 17px 妥了!!不过这个17是咋定的?每个浏览器、每个设备、每个平台都不一样?!

@afc163

This comment has been minimized.

Copy link
Member

@afc163 afc163 commented Nov 29, 2019

不一样的,rc-table 里是 js 算出来的。

afc163 added a commit that referenced this issue Dec 4, 2019
@fwtcumt

This comment has been minimized.

Copy link
Author

@fwtcumt fwtcumt commented Dec 5, 2019

我检查啦,我电脑没问题啦。谢谢antd团队的大佬支持,尽快组织发版把😄
WechatIMG23
WechatIMG24

@afc163 afc163 closed this in #19986 Dec 5, 2019
afc163 added a commit that referenced this issue Dec 5, 2019
close #19952
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.