Only show scrollbar when page scrolls in css

Question

I have an html page of different kinds of images in a <div> with following CSS property:

.images_container {
   position: relative;
   height: calc(100% - 200px);
   padding-top: 20px;
   overflow: auto;
   margin: auto;
}

Currently page scrollbar is showing but I want to show the scrollbar only when user scrolls the page. Is this possible in CSS or JavaScript?

Answer 1

If you hook up on the elements scroll event, you could do something like this, where you set the inner to width: 100% and a padding-right: 20px. (the padding right value need to be bigger than the scrollbar is wide)

That will push the scrollbar out of view, and on scroll you remove the padding, init a timer which will reset the padding if one stop scrolling

(function(timer) {
  window.addEventListener('load', function() {
    var el = document.querySelector('.inner');
    el.addEventListener('scroll', function(e) {
    (function(el){
      el.style.padding = '0';
      clearTimeout(timer);
      timer = setTimeout(function() {
        el.style.paddingRight = '20px';      
      }, 100);    
    })(el);
    })
  })
})();

.outer {
  height: 180px;
  width: 500px;
  border: 1px solid green;
  overflow: hidden;
}

.inner {
  width: 100%;
  height: 99%;
  overflow: auto;
  padding-right: 20px;
}

<div class="outer">
  <div class="inner">
    Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some
    content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some
    content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>
  </div>
</div>

---

Updated, toggling a class, using Element.classList, instead of an inline style, which might be a more recommended way.

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

.outer {
  height: 180px;
  width: 500px;
  border: 1px solid green;
  overflow: hidden;
}

.inner {
  width: 100%;
  height: 99%;
  overflow: auto;
  padding-right: 20px;
}
.inner.scroll {
  padding-right: 0;
}

<div class="outer">
  <div class="inner">
    Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some
    content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some
    content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>
  </div>
</div>

Answer 2

Extending this question: Hide scroll bar, but still being able to scroll.

You can use this trick like this:

document.getElementById("child").addEventListener("scroll", myFunction);

function myFunction() {
    document.getElementById("child").style.paddingRight = '0px';
}

#parent {
    border: 1px solid black;
    width: 500px;
    height: 100px;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 20px; /* Increase/decrease this value for cross-browser compatibility */
}

<div id="parent">
  <div  id="child">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
   'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
   'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
   'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
  </div>
</div>

Basically what it does is removing the padding right pixels and shows the scrollbar when the scroll is detected on the child element.

The bad thing about is you need to play with padding-right pixels for browser compatibility.