I'd like to have the scrollbar place over the content instead of forcing a gutter beside it.

In the attached image you can see what it currently does with the red scroll bar...it creates a vertical gutter that pushes the content to the side.

But what I want to do is what's on the bottom...have the scrollbar positioned over the content.

I've tried absolutely positioning .jspVerticalBar but I haven't been able to get rid of the gutter.

EDIT: Here's the jsFiddle of the problem: / -- As you can see, there's still a gap on the far right and the "selected" state of the item doesn't extend all the way over as I want it to.

I'd like to have the scrollbar place over the content instead of forcing a gutter beside it.

In the attached image you can see what it currently does with the red scroll bar...it creates a vertical gutter that pushes the content to the side.

But what I want to do is what's on the bottom...have the scrollbar positioned over the content.

I've tried absolutely positioning .jspVerticalBar but I haven't been able to get rid of the gutter.

EDIT: Here's the jsFiddle of the problem: http://jsfiddle/8Mebt/3/ -- As you can see, there's still a gap on the far right and the "selected" state of the item doesn't extend all the way over as I want it to.

• javascript
• jquery
• jscrollpane
• jquery-jscrollpane

• 1 can you please provide jsfiddle or other example of this in action? This way it will be much easier to figure out how to help. – Evgeny Shadchnev Commented Jun 20, 2011 at 11:24
• I ca solve it if u provide us a fiddle... :) – Alfred Commented Jun 20, 2011 at 11:32
• On my puter, I'm not able to scroll the jScrollPane page using my mouse wheel at all. Is this something you're aware of? – Tobias Cohen Commented Jun 20, 2011 at 13:13
• @Tobias: I haven't cross-browser tested all the javascript yet...and since I don't know what "your puter" is running, I can't tell you what the problem may be. It's working fine on mine though. :) – Shpigford Commented Jun 20, 2011 at 13:15
• @Shpigford Sorry, I should have said - Safari 5.0.5. – Tobias Cohen Commented Jun 20, 2011 at 13:23

3 Answers 3

The .jspVerticalBar is already absolutely positioned. Set its right property to what you want, and also set

.jspHorizontalBar, .jspVerticalBar, .jspTrack {
    background: none repeat scroll 0 0 transparent;
}

so that the background of the gutter (track as is it called in jscrollpane) is transparent..

Demo at http://jsfiddle/gaby/DsDQP/

Update

After the ments (including a jsfiddle) here is my workaround..

Set the verticalGutter setting to 0 and recalculate the width of the jspPane to include the jspTrack width..

$('.scroll-pane').jScrollPane({verticalGutter:0});
$('.jspPane').css({width:'+=' + $('.jspTrack').width()});

demo at http://jsfiddle/gaby/DsDQP/8/

The recalculation needs to be called after each reinitialization..

This is needed because the width of the jspPane (the content) is being added through javascript by calculating the container width and removing the verticalGutter and the .jspTrack width. You can alternatively redefine the width with CSS and use the !important directive to override the width added through javascript as @Evgeny mentions in the ments.

You can put a negative verticalGutter value at the jScrollPane initialization and it will do the trick, with no additional actions required.

$('.scroll-pane').jScrollPane({verticalGutter:-100})

http://jsfiddle/DsDQP/50/

You can try to do it this way.....

    //Should it (the #parentContainer) have had a "scroll-pane" class

        $('#parentContainer').jScrollPane()

    $.each(data, function(i, value) {

//Detach scrolling capabilities
        $('#parentContainer').jScrollPaneRemove();

        $('<div/>',{
        class:'anyClass',
        id:'anyId'
        })
        .appendTo(#childContainer);

//Return back Scrolling capabilities to the parent container    
        $('#parentContainer').jScrollPane();            


        ///-> Loop Ends
                });

With this, the scrolling capabilities are renewed every time a loop is made....hence the ScrollBar's length will grow or shrink depending on the size of data store in the child container.

Hope that helps....

Ebest