css 如何改变滚动条拇指颜色没有显示永久？

gmol1639 于 12个月前发布在其他

关注(0)|答案(3)|浏览(139)

我将滚动条的拇指颜色改为蓝色：

的数据
然而，拇指一直在显示。
无论如何，可以让它显示只有滚动就像浏览器一样？
下面是我的代码，你可以复制和测试：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      div#scrollable {
        border: 5px red solid;
        width: 150px;
        height: 200px;
        overflow-y: auto;
      }

      ::-webkit-scrollbar {
        width: 6px;
      }

      ::-webkit-scrollbar-thumb {
        background: blue;
        border-radius: 3px;
      }
    </style>
  </head>

  <body>
    <div id="scrollable">
      <p style="height: 1000px">my text</p>
    </div>
  </body>
</html>

字符串

css

来源：https://stackoverflow.com/questions/77743951/how-to-change-scrollbar-thumb-color-without-display-permanent

3条答案

按热度按时间

rdrgkggo1#

使用下面的代码来显示滚动条时，你可以向上或向下滚动根据您的要求。

(function(timer) {
    window.addEventListener('load', function() {
        var el = document.querySelector('.scrollable');
        el.addEventListener('scroll', function(e) {
            (function(el) {
                el.classList.add('scroll');
                clearTimeout(timer);
                timer = setTimeout(function() {
                    el.classList.remove('scroll');
                }, 500);
            })(el);
        })
    })
})();

.scrollable {
    border: 5px red solid;
    width: 150px;
    height: 200px;
    overflow-y: auto;
}

::-webkit-scrollbar {
    width: 0px;
}

.scrollable.scroll::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
    background: blue;
    border-radius: 3px;
}

<div class="outer">
    <div id="scrollable" class="scrollable">
        <p style="height: 1000px">my text</p>
    </div>
</div>

赞(0）回复(0）举报 12个月前

v8wbuo2f2#

const scrollableDiv = document.getElementById('scrollable');
      scrollableDiv.addEventListener('scroll', () => {
        const thumb = scrollableDiv.querySelector('::-webkit-scrollbar-thumb');
        thumb.style.opacity = '0.6';
        clearTimeout(scrollableDiv.dataset.scrollTimeout);
        scrollableDiv.dataset.scrollTimeout = setTimeout(() => {
          thumb.style.opacity = '0';
        }, 1000); // Adjust this timeout to control how long the thumb stays visible after scrolling stops
      });

div#scrollable {
        border: 5px red solid;
        width: 150px;
        height: 200px;
        overflow-y: auto;

<!-- SimpleBar CSS -->
    <link rel="stylesheet" href="https://unpkg.com/simplebar/dist/simplebar.min.css" />

  <body>
    <div id="scrollable" data-simplebar>
      <p style="height: 1000px">my text</p>
    </div>

    <!-- SimpleBar JavaScript -->
    <script src="https://unpkg.com/simplebar/dist/simplebar.min.js"></script>

赞(0）回复(0）举报 12个月前

toe950273#

希望这些变化能有所帮助！

::-webkit-scrollbar-thumb {
            display: none;
        }

        div#scrollable:hover::-webkit-scrollbar-thumb {
            display: block;
            background: blue;
        }

字符串

赞(0）回复(0）举报 12个月前

我来回答

css 如何改变滚动条拇指颜色没有显示永久？

3条答案

相关问题

热门标签

最新问答