CODEWITHSUNDEEP
javascripthtmlcss
Ahsan aslam
Ahsan aslam

Reputation: 1199

Only show scrollbar when page scrolls in css

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?

Upvotes: 11

Views: 39908

Answers (5)

Asons
Asons

Reputation: 87293

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>

Upvotes: 12

Pradeep Agnihotri
Pradeep Agnihotri

Reputation: 371

Try this simple solution with css only:

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

Upvotes: 0

GibboK
GibboK

Reputation: 73988

Consider using

overflow : auto;

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

Upvotes: 1

Troyer
Troyer

Reputation: 7013

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.

Upvotes: 3

HReynaud
HReynaud

Reputation: 54

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.

Upvotes: -5

Related Questions