diff --git a/src/FillSpace.jsx b/src/FillSpace.jsx index 270441e..6cb74fb 100644 --- a/src/FillSpace.jsx +++ b/src/FillSpace.jsx @@ -22,6 +22,7 @@ import { alpha } from '@mui/material/styles'; * @prop {number} [unfilteredTotal] - Total items in unfiltered dataset. When unfilteredTotal > pageSize, pagination space is reserved even if current filtered count <= pageSize, preventing layout shift. * @prop {number} [unfilteredCount] - Alias for unfilteredTotal. * @prop {(page: number) => void} [onPageChange] - Called on page change. + * @prop {boolean} [disableWheel=false] - When true, disables mouse wheel page flipping and lets the outer page scroll. * @prop {boolean} [virtualScrollbar=false] - Shows a synchronized scrollbar alongside pagination controls. * @prop {boolean} [reserveScrollbar] - Reserves raceway space even when items do not overflow (defaults to true when virtualScrollbar is true). * @prop {boolean} [debug=false] - Dashed outline for layout debugging. @@ -382,6 +383,7 @@ class FillSpace extends Component { } _handleWheel = (event) => { + if (this.props.disableWheel) return; const { items, totalCount } = this.props; if (!Array.isArray(items)) return; if (this.ref && event.target && !this.ref.contains(event.target)) return; @@ -437,6 +439,7 @@ class FillSpace extends Component { listRef, onPageChange, onWheel, + disableWheel = false, virtualScrollbar = false, reserveScrollbar, racewayMarginBottom, @@ -570,7 +573,9 @@ class FillSpace extends Component { this.ref = el; }} onWheel={(e) => { - this._handleWheel(e); + if (!disableWheel) { + this._handleWheel(e); + } onWheel?.(e); }} {...rest} @@ -580,9 +585,8 @@ class FillSpace extends Component { height: viewportHeight ?? 'auto', overflow: 'hidden', width: '100%', - // Keep wheel ticks from scrolling the page behind the list. - // (No preventDefault needed — React wheel is passive.) - overscrollBehavior: 'contain', + // Keep wheel ticks from scrolling the page behind the list unless disableWheel is true. + overscrollBehavior: disableWheel ? 'auto' : 'contain', }, debug ? (theme) => ({