Are there any JavaScript event listeners or CSS pseudo classes that can detect when a scrollbar appears and disappears? For example, on Mac OS and Windows Internet Explorer 10 or newer, the scrollbars are hidden by default but appear when scrolling begins. I would like to be able to determine when the scrollbars are visible and hidden.
var doscroll = false,
$html = $('html'),
timer;
$(window).on('scroll', function () {
if (!doscroll) {
doscroll = true;
$html.addClass('doscroll');
}
clearTimeout(timer);
timer = setTimeout(function () {
doscroll = false;
$html.removeClass('doscroll');
}, 2000);
})
However, clicking on the scrollbar without actually scrolling causes the doscroll class to be removed, and it is unclear exactly when to remove the doscroll class. Does anyone have a better solution or idea for this issue?