CODEWITHSUNDEEP
jqueryjscrollpane
AlexMorley-Finch
AlexMorley-Finch

Reputation: 6955

how to make jScrollPane conform to padding

Its hard to explain... but here's a picture I drew :D

scroll bar problem

I'm using the jScrollPane Found HERE!

The current scroll bar ignores the padding of the div. But I need the scroll bar to conform to the padding. I've read the css file and attempted to read the js but I can't figure it out.

the jScrollPane is a very good cross-browser solution but the documentation is truly rubbish in my opinion!

If its any help, the css for the container div is:

div#Side{
    /* box-model */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    /* structure */
    position:absolute;
    z-index: 2;
    right:18px;
    bottom:18px;
    width:261px;
    height:100%;
    padding-top: 10px;
    border-left: 1px Solid #EEE;
    /* style */
    background-color: #222;
}

Cheers Peoples,

Alex

Upvotes: 2

Views: 652

Answers (1)

Rrrapture
Rrrapture

Reputation: 64

This question is years old, but in case anyone else has a similar problem (I did), then this solution might help.

jScrollPane has a "caps" feature that lets you set a space or gap at the end of the scrollbar so that it doesn't reach the full height (or width, depending on the case) of your scrollable element.

In the case above, you would set this in the CSS:

.jspCap.jspCapTop {
    display: block;
    background: transparent;
}

.jspVerticalBar .jspCap.jspCapTop {
    height: 10px;
}

Reference: http://jscrollpane.kelvinluck.com/caps.html

Upvotes: 2

Related Questions