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

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 */
}

  
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.'
  

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.