antD 组件 React 下拉列表中的滚动条

在 React 开发中，Ant Design 是比较知名的 UI 组件库之一。其中，下拉列表组件中的滚动条是一个比较实用的功能，可以在下拉列表较长时，让用户方便快捷地进行滚动选择。

使用 Ant Design 的下拉列表组件，只需要在组件的属性中设置 showScrollbar 为 true，即可启用滚动条功能。

import { Select } from 'antd';

const { Option } = Select;

<Selec showArrow showScrollbar>
  <Option value="1">Option 1</Option>
  <Option value="2">Option 2</Option>
  <Option value="3">Option 3</Option>
  <Option value="4">Option 4</Option>
  <Option value="5">Option 5</Option>
  <Option value="6">Option 6</Option>
  <Option value="7">Option 7</Option>
  <Option value="8">Option 8</Option>
  <Option value="9">Option 9</Option>
  <Option value="10">Option 10</Option>
  <Option value="11">Option 11</Option>
  <Option value="12">Option 12</Option>
  <Option value="13">Option 13</Option>
  <Option value="14">Option 14</Option>
  <Option value="15">Option 15</Option>
  <Option value="16">Option 16</Option>
  <Option value="17">Option 17</Option>
  <Option value="18">Option 18</Option>
  <Option value="19">Option 19</Option>
  <Option value="20">Option 20</Option>
</Select>

需要注意的是，在启用 showScrollbar 属性后，Ant Design 默认只展示垂直方向的滚动条。如果需要同时展示水平和垂直方向的滚动条，需要在样式中添加如下代码：

.ant-select-dropdown-menu {
  overflow: auto;
}

同时，也可以通过设置 virtual 属性为 true，启用虚拟滚动（仅在大量数据情况下使用）。

<Selec virtual>
  {/* 大量数据的渲染 */}
</Select>