psudeo element: scrollbar is not working
Neha-takhi-cipl opened this issue · 0 comments
Neha-takhi-cipl commented
Hi, I have to customize the horizontal scrollbar. But psuedoclass scrollbar is not being added.
HTML Content is:
<div className="menuBar">
<Container>
<Row>
<Col>
<ul className="navbar">
<Link to={null}>Some Content</Link>
<li>
<Link to={null}>Some Content </Link>
</li>
<li>
<Link to={null}>Some Content</Link>
</li>
<li>
<Link to={null}>Some Content</Link>
</li>
</ul>
</Col>
<Col>
<ul className="navbar borderLeft">
<Link to={null}>Some Content </Link>
<li>
<Link to={null}>Some Content</Link>
</li>
<li>
<Link to={null}>Some Content</Link>
</li>
<li>
<Link to={null}>Some Content </Link>
</li>
</ul>
</Col>
<Col>
<ul className="navbar borderLeft">
<Link to={null}>Some Content</Link>
<li>
<Link to={null}>Some Content</Link>
</li>
<li>
<Link to={null}>Some Content</Link>
</li>
<li>
<Link to={null}>Some Content</Link>
</li>
</ul>
</Col>
</Row>
</Container>
</div>
Css is
"& .menuBar": {
"overflowX": "auto",
"::scrollbar": {
width: "20px",
},
/* Track */
"::scrollbarTrack": {
boxShadow: "inset 0 0 5px grey",
borderRadius: "10px",
},
/* Handle */
"::scrollbarThumb": {
background: "red",
borderRadius: "10px",
},
/* Handle on hover */
"::scrollbarThumb:hover": {
background: "#b30000",
},
}