解决页面滚动, 🍖ant design的select框和选项分离问题, 同时理解ant的html设计技巧.

通过解决我们也学一下ant的html/css设计技巧.

现象

滚动的时候, 这里"负责人"的选项和select框已经分离了.

我用的vue版本的, 我看了下react版本的api设计, 我想2个都会出现这特殊情况.

原因

点击select的时候, ant做了2件事情:

1. 生成"选项列表div"放在body的尾部.
2. "选项列表div"会根据select相对于body元素计算当前的位置, 并使用"绝对"定位.
   所以如果我们只使用body的滚动条, 那么滚动页面的时候选项和select框是一起滚动的, 但是如果我们自己设计了滚动条, 不使用body的问题就来了.

解决

知道了原因解决就很简单.

办法1

让select的父元素只有body带滚动条, 也就是只是用全局滚动条, 不自己针对某个div增加局部滚动.
我给自己的项目改了一下, 虽然改好了, 感觉代码不优雅. 所以又去看了下文档.

办法2

这个办法比较灵活, 看文档有一个getPopupContainerapi, 通过他指定select生成的"选项div"放在我们自己定义的带滚动条的div中.

总结

ant把选项放在body尾部, 防止了select的父元素带overflow:hidden而遮挡选项, 同时通过getPopupContainer保证div元素生成在滚动条所在的父元素内, 不用js监听滚动就可以实现select框和选项的滚动跟随(我刚遇到问题, 第一反应是监听滚动, 惭愧).