Problems with jscrollpane (custom styling)

Question

so i have working all days so my scroll look like this

https://i.sstatic.net/j3lTm.png

but what i have for now is this

https://i.sstatic.net/gVFkr.png

im only editing the css that i need the rest of it keeps the same on the library

If i move to the left too much the drag gets out and if i move it alot the right the drag will start dissapearing

Any ideas?

my css

        .jspVerticalBar .jspTrack
{
    right:-8px;
    width: 2px;
    background: url(http://remedia-solutions.com/clientes/0074_nagu/progreso/wp-content/themes/nagu/images/scrollbarrita.jpg);

}
.jspVerticalBar .jspDrag
{
    margin: 0 -6.5px;
    width: 14px;
    background: url(http://remedia-solutions.com/clientes/0074_nagu/progreso/wp-content/themes/nagu/images/circuloSCROLL.png);
}
.jspVerticalBar
{
    width: 15px;
    right: 0;
    margin-right:0px
}
.jspTrack{
    margin-left: -1px;
}

Answer 1

Try this:

.jspDrag {
    background: url(http://remedia-solutions.com/clientes/0074_nagu/progreso/wp-content/themes/nagu/images/circuloSCROLL.png);
    width: 14px;
    height: 14px !important;
}

.jspTrack {
    background: url(http://remedia-solutions.com/clientes/0074_nagu/progreso/wp-content/themes/nagu/images/scrollbarrita.jpg) repeat-y 50% 0;
}

.jspVerticalBar {
    background: none;
    width: 14px;
}