- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a custom scrollbar with CSS?
To create a custom scrollbar with CSS, the code is as follows −
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
height: 200vh; /*to create a scrollbar*/
}
::-webkit-scrollbar {
width: 20px;
}
p {
font-size: 40px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: rgb(75, 22, 161);
border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
background: #9156ff;
}
</style>
</head>
<body>
<h1>Custom Scrollbar Example</h1>
<h2>Will not work in IE,Edge and Firefox</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, rerum. Placeat molestias
quisquam doloremque, perferendis aspernatur quod cupiditate cumque porro cum facilis vel
dolorem fuga dolore quae deserunt sint inventore distinctio et, modi sunt! Commodi omnis
adipisci autem enim, perferendis, modi possimus quos, ducimus error hic natus voluptate.
Error, rem!
</p>
</body>
</html>Output
The above code will produce the following output −
Published on 08-May-2020 14:26:32
- Related Questions & Answers
- How to create a ScrollBar using JavaFX?
- How to create custom checkboxes and radio buttons with CSS?
- How to create custom select boxes with CSS and JavaScript?
- How to create custom range sliders with CSS and JavaScript?
- How to create Custom Cursor using CSS
- How to create a pagination with CSS?
- How to create a Calendar with CSS?
- How to create a preloader with CSS?
- How to create a custom jQuery Plugin?
- Java Program to create a TreeSet with custom Comparator
- How to create a transition effect with CSS?
- How to create a Hero Image with CSS?
- How to create a responsive image with CSS?
- How to create a vertical menu with CSS?
- How to create a subnavigation menu with CSS?
Advertisements