Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

155
Views
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

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!