給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
最終效果以下:

第一次寫文章.嗯 ,之後養成遇到問題就寫下來的好習慣.