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?
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>
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.
Consider using
overflow : auto;
If overflow is clipped, a scroll-bar should be added to see the rest of the content
Try this simple solution with css only:
.scrollbar {
min-height: 500px;
max-height: 500px;
background: #f1f1f1;
overflow-y: hidden;
}
.scrollbar:hover {
overflow-y : auto;
}
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.
