diff --git a/src/FillSpace.jsx b/src/FillSpace.jsx
index d8f80f7..db38d9b 100644
--- a/src/FillSpace.jsx
+++ b/src/FillSpace.jsx
@@ -21,6 +21,7 @@ import { alpha } from '@mui/material/styles';
* @prop {number} [unfilteredCount] - Alias for totalCount.
* @prop {(page: number) => void} [onPageChange] - Called on page change.
* @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.
* @prop {object} [sx] - Extra styles.
*/
@@ -411,6 +412,7 @@ class FillSpace extends Component {
onPageChange,
onWheel,
virtualScrollbar = false,
+ reserveScrollbar,
racewayMarginBottom,
racewayRight,
debug = false,
@@ -443,6 +445,10 @@ class FillSpace extends Component {
const racewayBottom = Math.max(0, Number(racewayMarginBottom ?? RACEWAY_BOTTOM_MARGIN) || 0);
const racewayRightOffset = racewayRight != null ? racewayRight : 0;
+ const scrollbarReserved = reserveScrollbar ?? Boolean(virtualScrollbar);
+ const scrollbarPadding = scrollbarReserved
+ ? `${Math.max(0, RACEWAY_WIDTH + racewayRightOffset + 8)}px`
+ : 0;
let thumbHeight = 0;
let thumbTop = 0;
@@ -514,7 +520,17 @@ class FillSpace extends Component {
) : null}
- {header}
+ {header != null ? (
+
+ {header}
+
+ ) : null}
{
this.ref = el;
@@ -545,7 +561,7 @@ class FillSpace extends Component {