Create Custom Scrollbar Using CSS

Hello Readers, Welcome to my other Blog, today in this Blog I'm going to create a custom scrollbar using HTML and CSS.

Video Tutorial Of Custom Scrollbar Using CSS:

In the video, you have seen the demo of this and I hope you love it.

Source Code:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom CSS ScrollBar - Sagar Developer</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="content">
        <h1>Custom CSS ScrollBar</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cupiditate dicta veniam molestiae odio quibusdam optio fuga necessitatibus magnam repudiandae impedit velit harum illum unde placeat quod, cumque hic? Vero quas perspiciatis illo, officiis distinctio laborum odit alias perferendis! Quasi, eveniet maxime! Fugiat magnam ullam incidunt distinctio nesciunt! Officia, labore ipsam.</p>
    </div>
</body>

</html>

style.css

* {
    margin: 0;
    padding: 0%;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background: #70bbbb;
    height: 200vw;
}

.content {
    color: #fff;
    font-size: 18px;
    font-family: sans-serif;
    padding: 60px 50px;
    text-align: center;
    justify-content: center;
}

.content h1 {
    color: #111;
    font-size: 50px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-thumb {
    border-radius: 30px;
    background: -webkit-gradient(linear, left top, left bottom, from(#00ffaa), to(#0089ff));
}

::-webkit-scrollbar-track {
    background: linear-gradient(to right, #91d3d3, #91d3d3 1px, #91d3d3 1px, #fff);
}

Sagar Developer

Create Custom Scrollbar Using CSS | Animation |

0/Post a Comment/Comments

Post a Comment

About Us

Contact Form

Create Custom Scrollbar Using CSS | Animation |

Related Posts

0/Post a Comment/Comments

Post a Comment

Contact Form