通过解决咱们也学一下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框和选项的滚动追随(我刚遇到问题, 第一反馈是监听滚动, 羞愧).
发表回复