Html Question posted in
Some basic documentation can be found here.

Html – How to change scrollbar thumb color without display permanent?

I changed scrollbar thumb color to blue:

enter image description here

However, the thumb showed all the time.

Anyway can make it show only scrolling just like browser do?

Below is my code, you can copy and test:

<!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>
Tags:

2

Answers


  1. 0

    Use the below code to show the scrollbar whenever you can scroll up or down as per your requirement.

    (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');
                }, 200);
            })(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>
    Login or Signup to reply.
  2. 0 
     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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search