CSS로 사용자 정의 스크롤바를 만들려면 코드는 다음과 같습니다 -
예시
<!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> 출력
위의 코드는 다음과 같은 출력을 생성합니다 -
