<!DOCTYPE html>
<html>
<head>
<title>Customize the scroll-bar</title>
<style>
body {
text-align: center;
}
.Container{
height: 150px;
width: 250px;
overflow-y: auto;
background-color: green;
border-radius: 5px;
margin: 0 auto;
}
.Content{
width: 300px;
color: white;
text-align: center;
}
.Flipped, .Flipped .Content{
transform: rotateX(180deg);
}
/* Designing for scroll-bar */
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: gainsboro;
border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: black;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<div class="Container Flipped">
<div class="Content">
GeeksforGeeks is a Computer Science
portal for geeks. It contains well
written, well thought and well
explained computer science and
programming articles, quizzes etc.
</div>
</div>
</body>
</html>
댓글