react-infinite-scroll-component
react-infinite-scroll-component copied to clipboard
How to set the width of the scrollbar?
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;
}
}