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?

You can only control overflow with CSS. Scrollbar visibility is an OS-level setting. — André Dion, May 02 '17 at 12:07
@Sheikh James can you please try height: calc(100vh - 200px); — Viijay ijardar, May 02 '17 at 12:08

Asons · Answer 1 · 2018-10-23T12:52:07.953

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>

@Troyer Yes it does, though as you extended the linked answer in yours, I did the same, but also made a good explanation and a fully working code with also hides the scrollbar when one stop scrolling...so in another way, very different...and I will upvote yours as it is a good start — Asons, May 02 '17 at 14:32

score 3 · Answer 2 · edited May 23 '17 at 11:47

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.

Thanks for that trick but i need to show scrollbar when user scroll page. right now content in div is overflow and a scrollbar s showing — Ahsan aslam, May 02 '17 at 13:11

score 0 · Answer 3 · answered May 02 '17 at 12:28

0

Consider using

overflow : auto;

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

answered May 02 '17 at 12:28

GibboK

71,848
143
435
658

2

Currently overflow is clipped and scrollbar is showing but i want to hide scrollbar is overflow is clipped but show when user scroll pgae – Ahsan aslam May 02 '17 at 13:08

score -1 · Answer 4 · answered Oct 01 '17 at 05:19

-1

Try this simple solution with css only:

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

answered Oct 01 '17 at 05:19

Pradeep Agnihotri

349
2
12

1

"When a page scrolls", not "When scrollbar is hovered on" – Tigerrrrr Mar 22 '22 at 16:58

score -5 · Answer 5 · answered May 02 '17 at 12:05

-5

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.

answered May 02 '17 at 12:05

HReynaud

54
1
9

3

Yes this is automatic feature but i need to show scrollbar only when user scroll. Can i hide scrollbar when page load and only show when user scroll page – Ahsan aslam May 02 '17 at 12:08

Only show scrollbar when page scrolls in css

5 Answers5

Linked