diff --git a/examples/switch.tsx b/examples/switch.tsx index b96c3790..c918c8ae 100644 --- a/examples/switch.tsx +++ b/examples/switch.tsx @@ -1,6 +1,6 @@ -/* eslint-disable jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */ import * as React from 'react'; -import List, { ListRef } from '../src/List'; +import type { ListRef } from '../src/List'; +import List from '../src/List'; interface Item { id: number; @@ -37,6 +37,7 @@ function getData(count: number) { const Demo = () => { const [height, setHeight] = React.useState(200); const [data, setData] = React.useState(getData(20)); + const [fullHeight, setFullHeight] = React.useState(true); const listRef = React.useRef(); return ( @@ -98,6 +99,15 @@ const Demo = () => { 200 + + + { height={height} itemHeight={10} itemKey="id" + fullHeight={fullHeight} style={{ border: '1px solid red', boxSizing: 'border-box', diff --git a/src/ScrollBar.tsx b/src/ScrollBar.tsx index f660a45e..b9b9986b 100644 --- a/src/ScrollBar.tsx +++ b/src/ScrollBar.tsx @@ -71,7 +71,7 @@ export default class ScrollBar extends React.Component { + onContainerMouseDown: React.MouseEventHandler = (e) => { e.stopPropagation(); e.preventDefault(); }; @@ -173,38 +173,35 @@ export default class ScrollBar extends React.Component { - const { visible } = this.state; + // Not show scrollbar when height is large than scrollHeight + showScroll = (): boolean => { const { height, scrollHeight } = this.props; - - if (height >= scrollHeight) { - return false; - } - - return visible; + return scrollHeight > height; }; // ====================== Render ======================= render() { - const { dragging } = this.state; + const { dragging, visible } = this.state; const { prefixCls } = this.props; const spinHeight = this.getSpinHeight(); const top = this.getTop(); - const visible = this.getVisible(); + const canScroll = this.showScroll(); + const mergedVisible = canScroll && visible; return (