How do I hide a scrollbar after scrolling and make it visible again on scroll?

My intention is to hide my scrollbar (i.e, hidden by SLIDING TO THE RIGHT), after scrolling (let's say, like 2 or 3 seconds after I'm done scrolling)

And to make it visible again, soon as I start scrolling (i.e, visible by SLIDING IN FROM THE RIGHT)

VIEW CODE SNIPPET:

div::-webkit-scrollbar {
  width: 8px;
  /* helps remove scrollbar which resizes or shifts list items */
  /* display: none; */
}

div::-webkit-scrollbar-track {
  background-color: #444444;
}

div::-webkit-scrollbar-button:vertical:increment {
  background-color: rgba(108, 92, 231, 0.65);
}

div::-webkit-scrollbar-button:vertical:decrement {
  background-color: rgba(108, 92, 231, 0.65);
}

div::-webkit-scrollbar-thumb {
  background-color: rgba(108, 92, 231, 0.7);
  border-radius: 10px;
}

div::-webkit-scrollbar-thumb:hover {
  background-color: rgba(108, 92, 231, 1);
}

div {
  width: 500px;
  height: 300px;
  background-color: #ececec;
  overflow: auto;
}
<div>
  <p style="height: 300vh;">Just some tall paragraph to force DIV scrollbars....</p>
</div>

Please help me everyone (I'D BE SO GRATEFUL!)

:D

2 answers

  • answered 2022-01-23 02:21 Cafer Aydın

    I am thinking about what if user do not have any mouse wheel for scrolling and if user scroll with the actually using scroll bar. Anyway please search for slim fading scroll bar example at google. You will find some examples for the slim scroll maybe it’s not invisible but it’s transparent and have a good shape.

  • answered 2022-01-23 02:49 Roko C. Buljan

    Since CSS does not have timeouts and clearing of timeouts - Use JavaScript

    • Use Element.classList to add and remove a class
    • Use setTimeout() set at 2500ms, but every time a scroll event is triggered remove the previous pending timeout using clearTimeout. Logically, after you finished scrolling the last timeout that was set will, after 2.5s trigger finally the class removal.
    • Use a CSS class like .is-scrolling to there define the desired scrollbar styles (which otherwise are transparent by default)

    const showScrollbars = (evt) => {
    
      const el = evt.currentTarget;
      clearTimeout(el._scrolling); // Cancel pending class removal
      
      el.classList.add("is-scrolling"); // Add class 
      
      el._scrolling = setTimeout(() => { // remove the scrolling class after 2500ms
        el.classList.remove("is-scrolling");
      }, 2500);
    };
    
    document.querySelectorAll("[data-scrollbars]").forEach(el => {
      el.addEventListener("scroll", showScrollbars); 
    });
    [data-scrollbars] {
      width: 500px;
      height: 180px;
      background-color: #ececec;
      overflow: auto;
    }
    
    [data-scrollbars]::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    
    [data-scrollbars]::-webkit-scrollbar-track {
      background-color: transparent;
    }
    
    [data-scrollbars]::-webkit-scrollbar-thumb {
      background-color: transparent;
      border-radius: 10px;
    }
    
    [data-scrollbars].is-scrolling::-webkit-scrollbar-track {
      background-color: #777;
    }
    
    [data-scrollbars].is-scrolling::-webkit-scrollbar-thumb {
      background-color: gold;
    }
    <div data-scrollbars>
      <p style="height: 300vh;">
        Just some tall paragraph to force DIV scrollbars...<br>
        Scroll me! (<<< PS: See the problem?!)
      </p>
    </div>

    I would highly not advise you hide scrollbars. Scrollbars are a visual hint to the user that there's actually content to be scrolled. Do a simple A/B testing. For half of your visitors show the scrollbar. For the other half, do that funky stuff - and don't be surprised that your click trough-rate for the below-the-fold portion of the app (or element) has fewer-to-none interactions by that second group of users.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum