Question

如果您转到youtube，则可以看到它们的侧边栏滚动条在鼠标移到上方时如何显示。我一直在尝试复制它，但是当我开始实际滚动时，我的div仅显示滚动条。

我有overflow-y: auto;，但我也用overflow-y: scroll;进行了尝试，效果相同。

如何使滚动条立即可见？

Answer 1

尝试：

#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>

Answer 2

您可以尝试使用此方法..也许会对您有所帮助。

它看起来不太好，但是我认为它应该可以工作。我使用scroll事件。如果需要使用wheel事件。根据需要设置时间延迟...

 (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>

通过mouseover和mouseleave事件。

         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>

通过悬停效果

.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>

如何在鼠标悬停时显示滚动条？

2 个答案: