Custom Scroll Bar Using HTML And CSS

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: burlywood;
            font-size: 1.5rem;
        }
        ::-webkit-scrollbar-track{
            background-color: red;
        }
        ::-webkit-scrollbar{
            width: 40px;
        }
        ::-webkit-scrollbar-thumb{
            background-color: blue;
        }
         ::-webkit-scrollbar-thumb:hover{
            background-color: green;
        }
        .content{
                background-color: white;
                height: 400px;
                width: 500px;
                overflow-y: scroll;
        }
        .content::-webkit-scrollbar-thumb{
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="container1">
        <h1>Custom Scroll</h1>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. At quod modi
            velit, a quo voluptatem ratione sapiente? At molestiae magni
            totam ipsam harum aliquid officia animi, dolore laborum dolorum,
            natus optio, beatae vel earum et quibusdam deleniti repudiandae
            voluptate inventore culpa minima. Debitis fugiat enim nam minima
            neque, ab adipisci eius recusandae nemo dolor suscipit,
            necessitatibus aperiam facere. Nihil, dolorem iure cupiditate quos
            nam quis numquam, minima mollitia, accusantium rem libero obcaecati eos
            voluptatibus similique. Nulla ab praesentium recusandae provident,
            illo voluptate assumenda dolore tenetur quae amet hic esse minus,
            non odio ex optio odit possimus debitis, at maxime quaerat!</p>
      <div class="content">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. At quod modi
            velit, a quo voluptatem ratione sapiente? At molestiae magni
            totam ipsam harum aliquid officia animi, dolore laborum dolorum,
            natus optio, beatae vel earum et quibusdam deleniti repudiandae
            voluptate inventore culpa minima. Debitis fugiat enim nam minima
            neque, ab adipisci eius recusandae nemo dolor suscipit,
            necessitatibus aperiam facere. Nihil, dolorem iure cupiditate quos
            nam quis numquam, minima mollitia, accusantium rem libero obcaecati eos
            voluptatibus similique. Nulla ab praesentium recusandae provident,
            illo voluptate assumenda dolore tenetur quae amet hic esse minus,
            non odio ex optio odit possimus debitis, at maxime quaerat!</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. At quod modi
                velit, a quo voluptatem ratione sapiente? At molestiae magni
                totam ipsam harum aliquid officia animi, dolore laborum dolorum,
                natus optio, beatae vel earum et quibusdam deleniti repudiandae
                voluptate inventore culpa minima. Debitis fugiat enim nam minima
                neque, ab adipisci eius recusandae nemo dolor suscipit,
                necessitatibus aperiam facere. Nihil, dolorem iure cupiditate quos
                nam quis numquam, minima mollitia, accusantium rem libero obcaecati eos
                voluptatibus similique. Nulla ab praesentium recusandae provident,
                illo voluptate assumenda dolore tenetur quae amet hic esse minus,
                non odio ex optio odit possimus debitis, at maxime quaerat!</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. At quod modi
            velit, a quo voluptatem ratione sapiente? At molestiae magni
            totam ipsam harum aliquid officia animi, dolore laborum dolorum,
            natus optio, beatae vel earum et quibusdam deleniti repudiandae
            voluptate inventore culpa minima. Debitis fugiat enim nam minima
            neque, ab adipisci eius recusandae nemo dolor suscipit,
            necessitatibus aperiam facere. Nihil, dolorem iure cupiditate quos
            nam quis numquam, minima mollitia, accusantium rem libero obcaecati eos
            voluptatibus similique. Nulla ab praesentium recusandae provident,
            illo voluptate assumenda dolore tenetur quae amet hic esse minus,
            non odio ex optio odit possimus debitis, at maxime quaerat!</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. At quod modi
            velit, a quo voluptatem ratione sapiente? At molestiae magni
            totam ipsam harum aliquid officia animi, dolore laborum dolorum,
            natus optio, beatae vel earum et quibusdam deleniti repudiandae
            voluptate inventore culpa minima. Debitis fugiat enim nam minima
            neque, ab adipisci eius recusandae nemo dolor suscipit,
            necessitatibus aperiam facere. Nihil, dolorem iure cupiditate quos
            nam quis numquam, minima mollitia, accusantium rem libero obcaecati eos
            voluptatibus similique. Nulla ab praesentium recusandae provident,
            illo voluptate assumenda dolore tenetur quae amet hic esse minus,
            non odio ex optio odit possimus debitis, at maxime quaerat!</p>
       
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. At quod modi
            velit, a quo voluptatem ratione sapiente? At molestiae magni
            totam ipsam harum aliquid officia animi, dolore laborum dolorum,
            natus optio, beatae vel earum et quibusdam deleniti repudiandae
            voluptate inventore culpa minima. Debitis fugiat enim nam minima
            neque, ab adipisci eius recusandae nemo dolor suscipit,
            necessitatibus aperiam facere. Nihil, dolorem iure cupiditate quos
            nam quis numquam, minima mollitia, accusantium rem libero obcaecati eos
            voluptatibus similique. Nulla ab praesentium recusandae provident,
            illo voluptate assumenda dolore tenetur quae amet hic esse minus,
            non odio ex optio odit possimus debitis, at maxime quaerat!</p>
      </div>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. At quod modi
            velit, a quo voluptatem ratione sapiente? At molestiae magni
            totam ipsam harum aliquid officia animi, dolore laborum dolorum,
            natus optio, beatae vel earum et quibusdam deleniti repudiandae
            voluptate inventore culpa minima. Debitis fugiat enim nam minima
            neque, ab adipisci eius recusandae nemo dolor suscipit,
            necessitatibus aperiam facere. Nihil, dolorem iure cupiditate quos
            nam quis numquam, minima mollitia, accusantium rem libero obcaecati eos
            voluptatibus similique. Nulla ab praesentium recusandae provident,
            illo voluptate assumenda dolore tenetur quae amet hic esse minus,
            non odio ex optio odit possimus debitis, at maxime quaerat!</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. At quod modi
            velit, a quo voluptatem ratione sapiente? At molestiae magni
            totam ipsam harum aliquid officia animi, dolore laborum dolorum,
            natus optio, beatae vel earum et quibusdam deleniti repudiandae
            voluptate inventore culpa minima. Debitis fugiat enim nam minima
            neque, ab adipisci eius recusandae nemo dolor suscipit,
            necessitatibus aperiam facere. Nihil, dolorem iure cupiditate quos
            nam quis numquam, minima mollitia, accusantium rem libero obcaecati eos
            voluptatibus similique. Nulla ab praesentium recusandae provident,
            illo voluptate assumenda dolore tenetur quae amet hic esse minus,
            non odio ex optio odit possimus debitis, at maxime quaerat!</p>
    </div>
</body>

</html>

Comments

Post a Comment

Popular posts from this blog

Javascript Array Concat and Join Method

  The JavaScript   Array concat()   Method is used to merge two or more arrays together. This method does not alter the original arrays passed as arguments. but instead return new Array. let newArray1 = oldArray.concat() let newArray2 = oldArray.concat(value0) let newArray3 = oldArray.concat(value0,value1) ....... ....... let newArray = oldArray.concat(value1 , [ value2, [ ...,[ valueN]]]) -------------------------------- Description The  join()  method returns an array as a string. The  join()  method does not change the original array. Any separator can be specified. The default is comma (,). <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title >Document</ title > </ head > < body >   ...
Read more

JavaScript While Loop

Image
--------- index.js page let num = 10; while (num >= 10) {   console.log("adisma");   num = num - 1; // num--; } ------------------------------------------------------------------------------------------ default.js page -----------  <script>       let num = 30;       while(num>=1){         document.write(num + ") Adisma <br>")         num = num-1; // num--;       }     </script> -----------------------------------------------
Read more

JavaScript pop() Method

  Definition and Usage The  pop()  method removes (pops)  the last element  of an array. The  pop()  method changes the original array. The  pop()  method returns the removed element. <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title >Document</ title > </ head > < body >   < h1 >JavaScript Array pop() Method</ h1 >   < script >     const myNumbers = [ 1 , 4 , 8 , 4 ];         console . log (myNumbers);     console . log (myNumbers . pop ());     console . log (myNumbers);           </ script > </ body > </ html >
Read more