I'm trying to modify the look of the scrollbar in my ReactJS application.
Basically, I would like to have something like the following:
I've tried to use CSS properties, e.g. -webkit-scrollbar, -webkit-scrollbar-track and -webkit-scrollbar-thumb, but I don't see any changes.
I searched online, but all I can find are 3rd party libraries which provide custom scrollbars.
Is there any way to do that without having to rely on an external dependency?
You can definitely do this using css only but browser support isn't that great which is why many JavaScript solutions exist. You can reduce the width of the -webkit-scrollbar-track by modifying the border-right and left:
border-left: 5px solid gray;
border-right: 5px solid gray;
As for the -webkit-scrollbar-thumb you can make it look as the image you provided by modifying the border radius:
border-radius: 10px;
the width of the scrollbar can be modified using the -webkit-scrollbar:
body::-webkit-scrollbar {
width: 15px;
}
Modifying a pen I found to look close to your desired design: https://codepen.io/rasso/pen/QWWxPQo
html {
background: #2a2d46;
height: 100%;
overflow: hidden;
}
body {
height: 100%;
overflow: scroll;
width: 80%;
max-width: 600px;
margin: 0 auto;
padding: 3em;
font: 100%/1.4 serif;
border: 1px solid rgba(0, 0, 0, 0.25);
}
p {
margin: 0 0 1.5em;
}
body::-webkit-scrollbar {
width: 15px;
background: #4d4e5a;
color: #333;
}
body::-webkit-scrollbar-track {
background: #595a62;
border-left: 5px solid #2a2d46;
border-right: 5px solid #2a2d46;
}
body::-webkit-scrollbar-thumb {
background-color: #fff;
border-radius: 10px;
}<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem deleniti accusantium quasi ab ad officia cupiditate sed aliquam nobis expedita velit dolorum perspiciatis pariatur nam vero et magnam soluta tempora!</div>
<div>Eveniet deserunt consequatur porro molestiae nulla optio quis totam libero iste nemo odit eum facilis sapiente. Harum similique cupiditate voluptas ea optio sunt molestias eius ab qui obcaecati nesciunt id?</div>
<div>Necessitatibus delectus sint vitae eos quasi optio esse dignissimos enim laborum ipsum harum perspiciatis eaque. Magnam fugiat delectus neque laboriosam in accusamus a veniam inventore asperiores consequatur nihil quae quo.</div>
<div>Eligendi quaerat nesciunt sint nobis qui? Temporibus maiores esse molestiae hic cum culpa sed recusandae dolore sequi modi. Quos illum debitis odio consequatur voluptatum error aliquam rem similique officia recusandae.</div>
<div>Ex suscipit earum reiciendis eaque dolorem inventore accusantium modi voluptatum saepe cum quam tempora autem corrupti illum deleniti iure rerum mollitia quo ducimus soluta ea! Illum aliquid consectetur vitae quod?</div>
<div>Minus rem tempora quo. Deleniti mollitia dignissimos laborum quis quos facilis dolore soluta error provident recusandae veniam minus consequatur blanditiis. Facere tempore praesentium soluta fugiat quia eligendi dolores ullam doloribus!</div>
<div>Aut nulla perferendis officiis accusamus ut aspernatur hic possimus amet blanditiis incidunt repudiandae ullam inventore ipsam recusandae nihil provident facilis totam quibusdam natus eligendi optio quia sapiente rerum quos illo?</div>
<div>Porro soluta nisi impedit voluptatem ex accusantium facilis amet quod blanditiis quia similique totam enim id ratione minus quo modi sequi nam dicta iste aliquid itaque velit accusamus quibusdam consequuntur.</div>
<div>Ab assumenda in ad nesciunt recusandae labore voluptates vero suscipit tenetur ullam sint beatae odio harum quo aperiam quas temporibus pariatur consectetur saepe eveniet minus voluptatem atque iusto similique repudiandae?</div>
<div>In enim odit repellat maxime harum eum expedita fuga vel eaque quaerat optio hic sapiente eveniet neque dolorum eligendi pariatur possimus aliquid minus officiis mollitia quia voluptates sunt nulla est!</div>
-webkit-scrollbar and the rest of the scrollbar elements with ReactJS. I've tried a similar solution and has no effect with React.