How to show scrollbar on mouse over?

Question

If you go to youtube, you can see how their sidebar scrollbar becomes visible as soon as your mouse moves over it. I've been trying to replicate this, but my div only shows the scrollbar once I start actually scrolling.

I have overflow-y: auto;, but I've also tried it with overflow-y: scroll;, which had the same effect.

How can I make the scrollbar visible right away?

Answer 1

you can try this .. maybe it will help you..

it's not looking good but i think it should work.. i use scroll event . if you need use wheel event . set time delay as you need...

 (function () {
            var timer;
            document.querySelector('div').addEventListener('scroll', function (event) {
                if (event.type == 'scroll') {
                addCSS = document.createElement('style');
                addCSS.innerHTML = "::-webkit-scrollbar { display: block; }";
                document.body.append(addCSS);
                }
                clearTimeout(timer);
                timer = setTimeout(refresh, 300);
            });
            var refresh = function () {
                addCSS = document.createElement('style');
                addCSS.innerHTML = "::-webkit-scrollbar { display: none; }";
                document.body.append(addCSS);
            };
        })();

 .customized-scrollbar {
            display: block;
            width: 10em;
            overflow: auto;
            height: 2em;
            margin: 10px;
        }
        ::-webkit-scrollbar {
            display: none;
        }

        .customized-scrollbar:hover::-webkit-scrollbar {
            /* display: block; */
            cursor: pointer;
        }



        /* Demonstrate a "mostly customized" scrollbar
        * (won't be visible otherwise if width/height is specified) */
        .customized-scrollbar::-webkit-scrollbar {
            width: 5px;
            height: 50px;
            /* background-color: #aaa; */
            background-color: transparent;
        }

        /* Add a thumb */
        .customized-scrollbar::-webkit-scrollbar-thumb {
            background: #000;
            height: 100px;


        }

 <div class="customized-scrollbar hidden-scrollbar" style="height:150px;background:red;width:200px;margin:0 auto;">
        Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
        Proin at nulla elementum, consectetur ex eget, commodo ante.
        Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
        blandit quam turpis, at mollis velit pretium ut. Nunc consequat
        efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
        sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
        tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
        consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
        amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
        mattis cursus dolor. Pellentesque id pretium est. Quisque
        convallis nisi a diam malesuada mollis. Aliquam at enim ligula
    </div>

by mouseover and mouseleave event..

         document.querySelector('div').addEventListener('mouseover', function (event) {
                addCSS = document.createElement('style');
                addCSS.innerHTML = "::-webkit-scrollbar { display: block; }";
                document.body.append(addCSS);
                
             
            });

             document.querySelector('div').addEventListener('mouseleave', function (event) {
             addCSS = document.createElement('style');
             addCSS.innerHTML = "::-webkit-scrollbar { display: none; }";
             document.body.append(addCSS);

            
             });

  html{
            scroll-behavior: smooth;
        }
        .customized-scrollbar {
            display: block;
            width: 10em;
            overflow: auto;
            height: 2em;
            margin: 10px;
        }
        ::-webkit-scrollbar {
            display: none;
            position: fixed;
           margin-right: -10px;
        }

        .customized-scrollbar:hover::-webkit-scrollbar {
            /* display: block; */
            cursor: pointer;
        }



        /* Demonstrate a "mostly customized" scrollbar
        * (won't be visible otherwise if width/height is specified) */
        .customized-scrollbar::-webkit-scrollbar {
            width: 5px;
            height: 50px;
            /* background-color: #aaa; */
            background-color: transparent;
        }

        /* Add a thumb */
        .customized-scrollbar::-webkit-scrollbar-thumb {
            background: #000;
            height: 100px;


        }

 <div class="customized-scrollbar hidden-scrollbar" style="height:150px;background:red;width:200px;margin:0 auto;">
        Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
        Proin at nulla elementum, consectetur ex eget, commodo ante.
        Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
        blandit quam turpis, at mollis velit pretium ut. Nunc consequat
        efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
        sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
        tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
        consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
        amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
        mattis cursus dolor. Pellentesque id pretium est. Quisque
        convallis nisi a diam malesuada mollis. Aliquam at enim ligula
    </div>

by hover effect

.mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;
  height: 2em;
  margin:10px;
}

.mostly-customized-scrollbar::-webkit-scrollbar {
  display: none;
}

.mostly-customized-scrollbar:hover::-webkit-scrollbar {
  display: block;
  cursor:pointer;
}

/* Demonstrate a "mostly customized" scrollbar
 * (won't be visible otherwise if width/height is specified) */
.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 50px;
/*  background-color: #aaa; */ 
  background-color: transparent; 
}

/* Add a thumb */
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000; 
    height: 100px;
    
    
}

<div class="mostly-customized-scrollbar" style="height:150px;background:red;width:200px;margin:0 auto;">
Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
  Proin at nulla elementum, consectetur ex eget, commodo ante. 
  Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
  blandit quam turpis, at mollis velit pretium ut. Nunc consequat
  efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
  sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
  tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
  consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
  amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
  mattis cursus dolor. Pellentesque id pretium est. Quisque
  convallis nisi a diam malesuada mollis. Aliquam at enim ligula
</div>

Answer 2

try this:

#container {
  margin: 20px;
  height: 100px;
  border: solid 1px red;
  background-color: #ddd;
  overflow-y: hidden;
}

#container:hover {
  overflow-y: scroll;
}

<body>
  <div id="container">
    <br> hello
    <br> hello
    <br> hello
    <br> hello
    <br> hello
    <br> hello
    <br> hello
  </div>
</body>