I use perfect-scrollbar https://github.com/mdbootstrap/perfect-scrollbar for custom scrollbar. The scrollbar is visible only when you mouse hover the container.
How can I show the bar only on scroll event and hide it on scroll end?
You can try using the javascript onscroll() function. Try something like this-
<html>
<body onscroll="bodyScroll();">
<script language="javascript">
var scrollTimer = -1;
function bodyScroll() {
document.body.style.backgroundColor = "white";
if (scrollTimer != -1)
clearTimeout(scrollTimer);
scrollTimer = window.setTimeout("scrollFinished()", 500);
}
function scrollFinished() {
document.body.style.backgroundColor = "red";
}
</script>
<div style="height:2000px;">
Scroll the page down. The page will turn red when the scrolling has finished.
</div>
</body>
</html>This code is from another stack question- How do I know when I've stopped scrolling?
Link to onscroll() event in js- https://www.w3schools.com/jsref/event_onscroll.asp