I'm attempting to create a unique user experience where the scrollbar is initially hidden using opacity. Then, when the user interacts with the page by scrolling or hovering over the scrollbar, it fades in smoothly thanks to CSS transitions. Finally, after a period of inactivity following scrolling, the scrollbar should fade out once again.
Here's the code snippet:
/* CSS */
::-webkit-scrollbar
{
opacity: 0;
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}
::-webkit-scrollbar:hover,
.scrolling::-webkit-scrollbar
{
opacity: 1;
}
/* JS */
$(document).ready(function(){
var scrollingTimeout = setInterval(function(){
$('html').removeClass('scrolling');
}, 1000);
$(window).scroll(function(){
clearInterval(scrollingTimeout);
$('html').addClass('scrolling');
});
});
However, I've encountered an issue where the opacity doesn't seem to take effect as expected. Even though the style is being applied according to the web inspector, the scrollbar remains visible regardless of whether the scrolling class is added to the HTML tag.
Any suggestions on what might be causing this problem?