Custom Scrollbar Design

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Scrollbar Design</title>
    <style>
        /* General Styles */
        body {
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
            background-color: #f0f2f5;
        }
        .content {
            height: 1500px;
            padding: 20px;
        }
        /* Scrollbar Styles */
        ::-webkit-scrollbar {
            width: 12px;
            background-color: #f0f2f5;
        }
        ::-webkit-scrollbar-track {
            background: #e0e0e0;
            border-radius: 10px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(45deg, #ff6f61, #de3c4b);
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
        }
        ::-webkit-scrollbar-thumb::before {
            content: '⬇️';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 16px;
            animation: scroll-animation 1.5s infinite;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(45deg, #de3c4b, #ff6f61);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
        }
        ::-webkit-scrollbar-corner {
            background: #f0f2f5;
        }
        @keyframes scroll-animation {
            0% {
                transform: translate(-50%, -50%) scale(1);
            }
            50% {
                transform: translate(-50%, -50%) scale(1.3);
            }
            100% {
                transform: translate(-50%, -50%) scale(1);
            }
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>Welcome to My Custom Scrollbar Design</h1>
        <p>Scroll down to see the custom scrollbar in action!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada. Nullam ac elementum erat. Sed mattis justo id suscipit scelerisque. Sed non ligula eros. Integer commodo, sem in sagittis hendrerit, urna lacus pretium turpis, et cursus lacus nulla nec libero. Suspendisse potenti. Phasellus convallis tellus id sapien suscipit, et consequat lacus consequat. Nulla facilisi. Integer dignissim neque ac ultricies ultricies. Aliquam erat volutpat.</p>
        <p>Suspendisse potenti. Morbi in massa velit. Sed eget odio quis arcu pretium efficitur. Aenean sit amet lacus sem. Curabitur dapibus, mi a posuere egestas, erat purus fringilla ex, et bibendum justo ligula vel risus. Pellentesque posuere laoreet libero, non fermentum est tincidunt nec. Suspendisse dignissim ligula nec tellus auctor, quis efficitur ligula interdum. Nunc interdum orci ut consectetur tincidunt. Nam eu tortor erat. Curabitur finibus magna nec ex congue, eget lacinia mi dictum. Phasellus a mi quam.</p>
        <p>Donec pretium lacinia nisl, sed commodo metus consectetur non. Nullam sed turpis eu nunc tincidunt cursus. Proin vitae semper enim. Nullam at leo nec sapien efficitur maximus. Nulla facilisi. Curabitur et magna et felis dapibus efficitur. Curabitur dapibus metus quis nisl cursus tincidunt. In tristique sapien quis magna cursus consequat.</p>
        <p>Fusce condimentum justo eget nisl ultricies, a scelerisque nisi viverra. Phasellus nec odio nec nisi vestibulum interdum. Nulla facilisi. Integer luctus, metus non pharetra lacinia, dui massa malesuada orci, vitae viverra orci sem nec metus. Phasellus suscipit suscipit sem, ut accumsan erat consectetur ac. Nulla facilisi. Quisque ut diam in augue tincidunt feugiat non in sapien. Proin consequat, metus et iaculis fermentum, est justo tincidunt purus, sit amet condimentum sapien felis sed quam. Nulla non mauris massa. Integer lacinia libero non neque fermentum, vel efficitur dui interdum. Proin at augue et ex tincidunt laoreet. Integer et arcu id purus pretium facilisis. Aenean sit amet sem lacus.</p>
    </div>
</body>
</html>

Custom Scrollbar Design - MeggiTools