给Ant Design list列表增加滑动框功能

描述:最近在用Ant Design 框架写一个项目,遇到了一个小问题,list列表会加载出很多数据.需要在固定区域查看所有的列表数据.
需求:给list列表增加一个滑动框

开始在官网上看了下例子.比较复杂..是list结合 react-infinite-scroller 实现滚动自动加载列表。
然后我还是尝试了一下,根据介绍安装了react-infinite-scroller 这个框架.但是最终没有做出想要的效果...

最后一个朋友给我介绍了一个很简单的方法.
给整个list添加样式就可以做出来了..

第一步:先设定固定高度,比如height:370px
第二步:设定滑动框:overflow-y:'scroll'

关于overflow-y 我还去查了一下它的用法

这个时候页面会变成这样:

在列表的下方和右边都会出现滑动框,但是需求是只需要在右侧出现滑动框
所以又新加了一个属性:overflow-x: 'hidden'
为了给滚动框留出一点位置,给整个列表加了个padding:6px
最终效果如下:

第一次写文章.嗯 ,以后养成遇到问题就写下来的好习惯.