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

Consider using

overflow : auto;

If overflow is clipped, a scroll-bar should be added to see the rest of the content

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.

Answer 3

It's an automatic feature,

you may try to set :

overflow : scroll;

to force it to work as you wanted.

You can also try overflow-x or overflow-y, depending on the axis you're scrolling.

Answer 4

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 5

Try this simple solution with css only:

  .scrollbar {
      min-height: 500px;
      max-height: 500px;
      background: #f1f1f1;
      overflow-y: hidden;
    }
  .scrollbar:hover {
      overflow-y : auto;
    }