Only show scrollbar when page scrolls in css

Question

I have an html page of different kinds of images in a

with following CSS property:

.images_container {
   position: relative;
   hei         


        

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;
}

  

    Some content
Some content
Some content
 Some content
Some content
Some content
 Some content
Some content
Some content
 Some content
Some content
Some content
 Some content
Some content
Some content
 Some
    content
Some content
Some content
 Some content
Some content
Some content
 Some content
Some content
Some content
 Some content
Some content
Some content
 Some content
Some content
Some content
 Some content
Some
    content
Some content
 Some content
Some content
Some content
 Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content

  

---

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;
}

  

    Some content
Some content
Some content
 Some content
Some content
Some content
 Some content
Some content
Some content
 Some content
Some content
Some content
 Some content
Some content
Some content
 Some
    content
Some content
Some content
 Some content
Some content
Some content
 Some content
Some content
Some content
 Some content
Some content
Some content
 Some content
Some content
Some content
 Some content
Some
    content
Some content
 Some content
Some content
Some content
 Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content