通过解决我们也学一下ant的html/css设计技巧.
现象
滚动的时候, 这里"负责人"的选项和select框已经分离了.
我用的vue版本的, 我看了下react版本的api设计, 我想2个都会出现这特殊情况.
原因
点击select的时候, ant做了2件事情:
- 生成"选项列表div"放在body的尾部.
- "选项列表div"会根据select相对于body元素计算当前的位置, 并使用"绝对"定位. 所以如果我们只使用body的滚动条, 那么滚动页面的时候选项和select框是一起滚动的, 但是如果我们自己设计了滚动条, 不使用body的问题就来了.
解决
知道了原因解决就很简单.
办法1
让select的父元素只有body带滚动条, 也就是只是用全局滚动条, 不自己针对某个div增加局部滚动. 我给自己的项目改了一下, 虽然改好了, 感觉代码不优雅. 所以又去看了下文档.
办法2
这个办法比较灵活, 看文档有一个getPopupContainerapi, 通过他指定select生成的"选项div"放在我们自己定义的带滚动条的div中.
总结
ant把选项放在body尾部, 防止了select的父元素带overflow:hidden而遮挡选项, 同时通过getPopupContainer保证div元素生成在滚动条所在的父元素内, 不用js监听滚动就可以实现select框和选项的滚动跟随(我刚遇到问题, 第一反应是监听滚动, 惭愧).
