Looking to create a custom scrollbar for my web application.
The approach I'm taking involves shifting the default scrollbar 100px to the right and hiding it with overflow:hidden in the parent container
$(".scrollbar-vertical").parent().children(".content").scroll(function(){
scrollerHeight = ( $(this).parent().height() / $(this).prop("scrollHeight") ) * $(this).parent().height();
sTop = ( $(this).scrollTop() / ( $(this).prop("scrollHeight") - $(this).outerHeight() ) * ( $(this).height() - scrollerHeight) );
console.log($(this).scrollTop());
$(this).parent().children(".scrollbar").children(".scroller").css({
margin:sTop+"px"+" 0 0 0"
});
});
$(".scrollbar-vertical").parent().children(".content").each(function(){
scrollerHeight = ( $(this).parent().height() / $(this).prop("scrollHeight") ) * $(this).parent().height();
$(this).parent().children(".scrollbar").children(".scroller").css({
height:scrollerHeight
});
pad = $(this).css("padding-bottom").match(/[-\d]+/g)[0]*1+$(this).css("padding-top").match(/[-\d]+/g)[0]*1;
if($(this).prop("scrollHeight") - pad <= $(this).height()){
$(this).parent().children(".scrollbar").hide();
}
});
.example{
width:300px;
height:100px;
overflow:hidden;
position:relative;
background:#eee;
}
.content{
width:100%;
height:100%;
overflow:scroll;
padding:0 100px 100px 0;
margin:0 100px 100px 0;
float:left;
}
.scrollbar-vertical{
width:5px;
height:100%;
position:absolute;
float:left;
right:0;
}
.scrollbar{
transition:0.3s;
background:transparent;
}
.scrollbar:hover{
background:rgba(0,0,0,0.2) !important;
}
.scrollbar-vertical .scroller{
width:100%;
min-height:10px;
background:#333 !important;
}
.scrollbar-vertical:hover{
width:10px;
}
.scrollbar-horizontal{
height:5px;
width:100%;
position:absolute;
float:left;
bottom:0;
}
.scrollbar-horizontal:hover{
height:10px;
}
.scrollbar-horizontal .scroller{
height:100%;
min-width:10px;
background:#333 !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "example">
<div class = "content">
content..<br>
content..<br>
content..<br>
content..<br>
content..<br>
content..<br>
</div>
<div class = "scrollbar scrollbar-vertical">
<div class = "scroller"></div>
</div>
</div>It works well when
overflow-y: scroll is applied to .content, but fails with overflow: scroll.
Even with overflow: scroll set, the scrollbar functions correctly in Chrome's developer mode. The issue seems to stem from $(this).scrollTop() increasing by 17 outside of developer mode. Any insights on why this might be happening are appreciated.