feat: virtual scrollbar will hide after delay, add a alwaysShowScrollbar param to support always show scrollbar

README.md

@@ -42,7 +42,7 @@ open http://localhost:9001/
 ```js
 import List from 'rc-virtual-list';
 
-<List data={[0, 1, 2]} height={200} itemHeight={30} itemKey="id">
+<List data={[0, 1, 2]} height={200} itemHeight={30} alwaysShowScrollbar={true} itemKey="id">
   {index => <div>{index}</div>}
 </List>;
 ```
@@ -60,6 +60,7 @@ import List from 'rc-virtual-list';
 | height     | List height                                             | number                               | -       |
 | itemHeight | Item minium height                                      | number                               | -       |
 | itemKey    | Match key with item                                     | string                               | -       |
+| alwaysShowScrollbar    | Virtual scrollbar will show always                 | boolean                              | false   |
 
 `children` provides additional `props` argument to support IE 11 scroll shaking.
 It will set `style` to `visibility: hidden` when measuring. You can ignore this if no requirement on IE.

examples/height.tsx

@@ -42,6 +42,7 @@ const Demo = () => {
 
         <List
           data={data}
+          alwaysShowScrollbar={true}
           height={500}
           itemHeight={30}
           itemKey="id"
@@ -50,7 +51,7 @@ const Demo = () => {
             boxSizing: 'border-box',
           }}
         >
-          {item => <ForwardMyItem {...item} />}
+          {(item) => <ForwardMyItem {...item} />}
         </List>
       </div>
     </React.StrictMode>

src/List.tsx

@@ -41,6 +41,7 @@ export interface ListProps<T> extends React.HTMLAttributes<any> {
   children: RenderFunc<T>;
   data: T[];
   height?: number;
+  alwaysShowScrollbar?: boolean;
   itemHeight?: number;
   /** If not match virtual scroll condition, Set List still use height of container. */
   fullHeight?: boolean;
@@ -56,6 +57,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   const {
     prefixCls = 'rc-virtual-list',
     className,
+    alwaysShowScrollbar,
     height,
     itemHeight,
     fullHeight = true,
@@ -99,7 +101,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
 
   // ================================ Scroll ================================
   function syncScrollTop(newTop: number | ((prev: number) => number)) {
-    setScrollTop(origin => {
+    setScrollTop((origin) => {
       let value: number;
       if (typeof newTop === 'function') {
         value = newTop(origin);
@@ -242,8 +244,8 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     useVirtual,
     isScrollAtTop,
     isScrollAtBottom,
-    offsetY => {
-      syncScrollTop(top => {
+    (offsetY) => {
+      syncScrollTop((top) => {
         const newTop = top + offsetY;
         return newTop;
       });
@@ -338,9 +340,10 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
           {listChildren}
         </Filler>
       </Component>
-
-      {useVirtual && (
+      {/* TODO: 高度不够 没有出现滚动条的时候不需要渲染下面的 scrollBar */}
+      {useVirtual && inVirtual && (
         <ScrollBar
+          alwaysShowScrollbar={alwaysShowScrollbar}
           ref={scrollBarRef}
           prefixCls={prefixCls}
           scrollTop={scrollTop}

src/ScrollBar.tsx

@@ -10,6 +10,7 @@ export interface ScrollBarProps {
   scrollHeight: number;
   height: number;
   count: number;
+  alwaysShowScrollbar?: boolean;
   onScroll: (scrollTop: number) => void;
   onStartMove: () => void;
   onStopMove: () => void;
@@ -39,7 +40,7 @@ export default class ScrollBar extends React.Component<ScrollBarProps, ScrollBar
     dragging: false,
     pageY: null,
     startTop: null,
-    visible: false,
+    visible: !!this.props.alwaysShowScrollbar,
   };
 
   componentDidMount() {
@@ -59,6 +60,7 @@ export default class ScrollBar extends React.Component<ScrollBarProps, ScrollBar
   }
 
   delayHidden = () => {
+    if (this.props.alwaysShowScrollbar) return;
     clearTimeout(this.visibleTimeout);
 
     this.setState({ visible: true });