Scrollbar styling mysteriously changed - css

Question

For some reason, the styling of my scrollbars changed.
I did not change any of the overflow styling (I am using overflow-y: scroll for my divs).
The scrollbar used to disappear when the div was not being scrolled, similar to the scrollbars used in the Facebook chat.
Now it has this static border and the scroll bar does not disappear:
I am using Chrome as my browser.

Answer 1

You can some some javascript which detects when user scroll then show scroll bar
here is a snippet
function scroll(e){
e.target.style.overflow='scroll';
}
function noscroll(e){
e.target.style.overflow='hidden';
}
document.getElementById('div').onwheel=scroll;
document.getElementById('div').onmouseout=noscroll;
div {
width:200px;
height:100px;
border:solid black;
overflow-y: hidden;
}
<div id="div">
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
</div>

Answer 2

If you want the scroll bar to appear only when there is something to scroll in, use overflow: auto instead of overflow: scroll

Answer 3

One way is to create a custom scroll pane. Then it is easy to set the opacity of the scrollbar to zero when the mouse leaves it, something like
scrollpane.onwheel = function(){
scrollbar.style.opacity = 1;
};
scrollpane.onmouseout = function(){
scrollbar.style.opacity = 0;
}
Another way would be to hide the scrollbar with another element on top of it. You can create an outer div with overflow:hidden and an inner div with overflow:scroll. Then set absolute sizes for both divs and make the inner div about 20px bigger than the outer div. This should hide the scrollbar.
I'd like to add that it's hard to answer such a vague question. It would have been easier if you wrote your code into your question.
EDIT:
I have created a working jsfiddle with a custom scrollbar.
Custom scrollbars are a bit difficult because many events are involved, and they work differently in different browsers. For example, it might not work well on mobile devices. I have disabled text selection during dragging the slider, but this doesn't work the same on all browsers.
I even managed to prevent scrolling on the page while the cursor is in the custom scroll pane.
I hope that this meets your expectations!
Aloso