Everything about css scrollbar styling

CSS properties to style the scroll bar:

selector::webkit-scrollbar
To write css for scrollbar use this property.

selector::webkit-scrollbar-thumb
To write css for scrollbar thumb use this property.

selector::webkit-scrollbar-track
To write css for scrollbar track use this property.

selector::webkit-scrollbar-corner
To write css for scrollbar corner use this property.

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
    p{
        border:solid 5px red;
        width:100px;
        height:100px;
        overflow:auto;
    }
    p::webkit-scrollbar{
        width:20px;
    }
    p::webkit-scrollbar-track{
        border-radius:10px;
        background-color:green;
    }
    p::webkit-scrollbar-thumb{
        border-radius:10px;
        background-color:blue;
    }
    p::webkit-scrollbar-corner{
        background-color:red;
    }
</style>
</head>
<body>

<p id="first_heading">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit labore, sequi exercitationem temporibus tempore illum porro iusto odio perferendis pariatur minima enim, natus laborum amet saepe, officiis nisi iste! Unde sequi nesciunt, libero nisi ut voluptates minus molestiae autem ab a suscipit fugit ducimus inventore doloribus! Tempore fugiat id architecto.
</p>
</body>
</html>

How to perform smooth scrolling using css?

To perform smooth scrolling we use: scroll-behavior: two fixed value auto(default) and smooth;

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
    div{
        border:solid 5px red;
        width:70%;
        height:500px;
        overflow:auto;
        scroll-behavior:smooth;
    }
</style>
</head>
<body>

<div>
<ul>
    <li><a href="#Home">Home</a></li>
    <li><a href="#Info">Info</a></li>
    <li><a href="#Blogs">Blogs</a></li>
</ul>>

<h2 id="Home">Home</h2> <p > Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa inventore consequuntur enim assumenda? Reiciendis deleniti minima tenetur eveniet quos optio non alias et voluptates aliquid, aspernatur nihil est laborum sunt. Ex sit aspernatur incidunt facilis expedita odit, dicta accusamus illo quaerat tempora reprehenderit laborum repellendus eaque eum amet deserunt excepturi commodi a, dolorum numquam distinctio. Similique cupiditate ad provident hic non doloribus sit reiciendis ullam, unde architecto omnis repellat voluptatum.
</p>

<h2 id="Info">Info</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa inventore consequuntur enim assumenda? Reiciendis deleniti minima tenetur eveniet quos optio non alias et voluptates aliquid, aspernatur nihil est laborum sunt. Ex sit aspernatur incidunt facilis expedita odit, dicta accusamus illo quaerat tempora reprehenderit laborum repellendus eaque eum amet deserunt excepturi commodi a, dolorum numquam distinctio. Similique cupiditate ad provident hic non doloribus sit reiciendis ullam, unde architecto omnis repellat voluptatum.
</p>

<h2 id="Blogs">Blogs</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa inventore consequuntur enim assumenda? Reiciendis deleniti minima tenetur eveniet quos optio non alias et voluptates aliquid, aspernatur nihil est laborum sunt. Ex sit aspernatur incidunt facilis expedita odit, dicta accusamus illo quaerat tempora reprehenderit laborum repellendus eaque eum amet deserunt excepturi commodi a, dolorum numquam distinctio. Similique cupiditate ad provident hic non doloribus sit reiciendis ullam, unde architecto omnis repellat voluptatum.
</p>

</div>
</body>
</html>

CodersAim is created for learning and training a self learner to become a professional from beginner. While using CodersAim, you agree to have read and accepted our terms of use, privacy policy, Contact Us