react-infinite-scroll-component icon indicating copy to clipboard operation
react-infinite-scroll-component copied to clipboard

How to set the width of the scrollbar?

Open Nickk4 opened this issue 3 years ago • 1 comments

I have a react-infinite-scroll-component in combination with react-custom-scrollbars. The code below works for me. However, I would like to set a different width for the scrollbar. Is this possible? I've tried using webkit-scrollbar in CSS, but this doesn't seem to do anything.

import InfiniteScroll from "react-infinite-scroll-component";
import ScrollingContainer from "../../../components/ScrollingContainer/";

<div
    id="scrollabl"
    style={{
        height: "calc(90vh - 200px)",
        //"scrollbar-width": "111px", Doesn't work
        //scrollbarWidth: "111px", Doesn't work
    }}
>
    <ScrollingContainer
        onScroll={this.loadItems}
    >
        <InfiniteScroll
            scrollableTarget="scrollabl"
            dataLength={
                this.state.users.length
            }
            next={this.loadItems}
            hasMore={this.state.hasMoreItems}
            endMessage={<p>No more</p>}
            loader={
                this.state.paginateLoading ? (
                    <p>Loading...</p>
                ) : (
                    ""
                )
            }
        >
            etc.

ScrollingContainer component:

import { Scrollbars } from "react-custom-scrollbars";

...

render() {
	return (
		<Scrollbars
			id="gooo"
			autoHide={this.props.hide}
			hideTracksWhenNotNeeded
			onScrollFrame={this.props.onScroll}
			universal
			ref={(node) => (this.node = node)}
		>
			{this.props.children}
		</Scrollbars>
	);
}

And in CSS:

#scrollabl {
    .infinite-scroll-component {
        overflow: hidden !important;
        padding-right: 30px;
    }
    // I've tried the following, but this doesn't seem to do anything:
    .infinite-scroll-component::-webkit-scrollbar {
        width: 100px!important;
    }
}

Nickk4 avatar Feb 18 '22 19:02 Nickk4