fix: scrollbar should not be displayed when scrollHeight is greater t…

…han height (#208)
react-component · Jul 14, 2023 · b458210 · b458210
1 parent 214131c
commit b458210
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 13 deletions.
diff --git a/src/List.tsx b/src/List.tsx
@@ -372,7 +372,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
         </Filler>
       </Component>
 
-      {useVirtual && (
+      {useVirtual && scrollHeight > height && (
         <ScrollBar
           ref={scrollBarRef}
           prefixCls={prefixCls}

diff --git a/src/ScrollBar.tsx b/src/ScrollBar.tsx
@@ -177,21 +177,13 @@ export default class ScrollBar extends React.Component<ScrollBarProps, ScrollBar
     return ptg * enableHeightRange;
   };
 
-  // Not show scrollbar when height is large than scrollHeight
-  showScroll = (): boolean => {
-    const { height, scrollHeight } = this.props;
-    return scrollHeight > height;
-  };
-
   // ====================== Render =======================
   render() {
     const { dragging, visible } = this.state;
     const { prefixCls, direction } = this.props;
     const spinHeight = this.getSpinHeight();
     const top = this.getTop();
 
-    const canScroll = this.showScroll();
-    const mergedVisible = canScroll && visible;
     const scrollBarDirection =
       direction === 'rtl'
         ? {
@@ -204,16 +196,14 @@ export default class ScrollBar extends React.Component<ScrollBarProps, ScrollBar
     return (
       <div
         ref={this.scrollbarRef}
-        className={classNames(`${prefixCls}-scrollbar`, {
-          [`${prefixCls}-scrollbar-show`]: canScroll,
-        })}
+        className={`${prefixCls}-scrollbar`}
         style={{
           width: 8,
           top: 0,
           bottom: 0,
           ...scrollBarDirection,
           position: 'absolute',
-          display: mergedVisible ? null : 'none',
+          display: visible ? null : 'none',
         }}
         onMouseDown={this.onContainerMouseDown}
         onMouseMove={this.delayHidden}