ScrollThumb
is an easy-to-use React component that allows you to display a scroll thumb without the scrollbar. The thumb automatically hides when idle and reappears on scroll, providing a sleek and unobtrusive user interface for tracking scroll progress. It Also works well with gsap's ScrollSmoother on React frameworks.
Autocomplete, guides on hover and type definitions are available for the component.
Install the package using:
npm install scrollthumb
Example usage of thumb; place it between the body and the main element.
import ScrollThumb from 'scrollthumb';
<ScrollThumb
color={'rgba(37, 99, 235, 1)'}
width={'6px'}
height={'64px'}
position={'right'}
zIndex={'100'}
borderRadius={'8px'}
hidetime={'3'}
/>
next.js/gsap example
'use client';
import ScrollThumb from "scrollthumb";
import {useScrollSmoother} from "use-scrollsmoother";
export default function Home() {
const {smoothWrapperRef, smoothContentRef} = useScrollSmoother({
config: {
smooth: 2,
smoothTouch: 0.2,
snormalizeScroll: true,
signoreMobileResize: true,
},
});
return (
<>
<div id="smooth-wrapper" ref={smoothWrapperRef}>
<div id="smooth-content" ref={smoothContentRef}>
<main>
{/* the rest of your page content */}
</main>
</div>
</div>
<ScrollThumb
color={'rgba(37, 99, 235, 1)'}
width={'6px'}
height={'64px'}
position={'right'}
zIndex={'100'}
borderRadius={'8px'}
hidetime={'3'}
/>
</>
);
}
- The background color of the thumb.
- Default: 'rgba(37, 99, 235, 1)'
- The width of the thumb.
- Default: 6px
- The height of the thumb.
- Default: 64px
- The position of the thumb, either 'left' or 'right'.
- Default: 'left'
- The z-index of the thumb.
- Default: 50
- The border radius of the thumb.
- Default: 2px
- The hide timeout for the thumb in seconds.
- Default: 2 seconds
This package is licensed under the ISC License.