How to Create Custom Scrollbar in CSS | Awesome Scrollbar

#html #css #beginners #codenewbie

Hello guys, In this video we will learn how to create creative custom scrollbar using html and css.

First, we need to create two files index.html and style.css then we need to do code for it.

Step:#1

Add below code inside index.html

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

<head>
  <meta charset="UTF-8" />
  <title>How to create custom scroll bar like csstricks</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>

</body>

</html>

Step:#2

Then we need to add code for style.css which code I provide in the below screen.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 300vh;
  background: #262626;
}

html::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

html::-webkit-scrollbar-track {
  background: linear-gradient(90deg, #434343, #434343 1px, #111 0, #111);
}

html::-webkit-scrollbar-thumb {
  background: #434343;
  border-radius: 16px;
  box-shadow: inset 2px 2px 2px hsl(0deg 0% 100% / 25%),
    inset -2px -2px 2px rgb(0 0 0 / 25%);
}