Basic Custom Scrollbar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Custom Scrollbar</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        .scroll-box {
            width: 300px;
            height: 200px;
            overflow-y: auto;
            padding: 20px;
            border-radius: 15px;
            background: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            position: relative;
        }
        .scroll-box p {
            margin: 0;
        }
        /* Custom Scrollbar Styles */
        .scroll-box::-webkit-scrollbar {
            width: 12px;
        }
        .scroll-box::-webkit-scrollbar-track {
            background: linear-gradient(180deg, #e0e0e0, #c0c0c0);
            border-radius: 10px;
        }
        .scroll-box::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #ff7b00, #ff5500);
            border-radius: 10px;
            position: relative;
        }
        .scroll-box::-webkit-scrollbar-thumb:before {
            content: '🔻';
            font-size: 12px;
            color: #fff;
            position: absolute;
            top: 2px;
            left: 50%;
            transform: translateX(-50%);
        }
        .scroll-box::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #ff5500, #ff0000);
        }
        .scroll-box::-webkit-scrollbar-thumb:hover:before {
            content: '🔥';
        }
        /* Firefox scrollbar styles */
        .scroll-box {
            scrollbar-width: thin;
            scrollbar-color: #ff7b00 #e0e0e0;
        }
        .scroll-box:hover::-webkit-scrollbar-thumb {
            animation: scroll-animation 1s infinite alternate;
        }
        @keyframes scroll-animation {
            0% { background: #ff7b00; }
            100% { background: #ff5500; }
        }
    </style>
</head>
<body>
    <div class="scroll-box">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt ut eros ac dictum. Sed tincidunt, lorem ut auctor ultricies, mi dui facilisis odio, ac malesuada felis sapien et libero. In hac habitasse platea dictumst. Suspendisse potenti. Mauris nec dui vitae nisi convallis facilisis. Integer vel justo id felis gravida fringilla. Nulla facilisi. Cras consectetur lorem in massa interdum, a scelerisque lectus varius. In eu lacus ut mauris ultricies tristique. Etiam nec urna in leo tincidunt gravida a sit amet ex.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt ut eros ac dictum. Sed tincidunt, lorem ut auctor ultricies, mi dui facilisis odio, ac malesuada felis sapien et libero. In hac habitasse platea dictumst. Suspendisse potenti. Mauris nec dui vitae nisi convallis facilisis. Integer vel justo id felis gravida fringilla. Nulla facilisi. Cras consectetur lorem in massa interdum, a scelerisque lectus varius. In eu lacus ut mauris ultricies tristique. Etiam nec urna in leo tincidunt gravida a sit amet ex.</p>
    </div>
</body>
</html>

Basic Custom Scrollbar - MeggiTools