jScrollPane: Remove scrollbar gutter?

Question

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.net/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.

Cherise

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. – Spectacular

I ca solve it if u provide us a fiddle... :) – Anthracoid

On my computer, I'm not able to scroll the jScrollPane page using my mouse wheel at all. Is this something you're aware of? – Francium

@Tobias: I haven't cross-browser tested all the javascript yet...and since I don't know what "your computer" is running, I can't tell you what the problem may be. It's working fine on mine though. :) – Cherise

@Cherise Sorry, I should have said - Safari 5.0.5. – Francium

Answer 1

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.net/gaby/DsDQP/

---

Update

After the comments (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.net/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 comments.

Cycloplegia

I dont think he need to make it TRANSPARENT.. even if its transparent, the content will be pushed sidewards.. He want to remove the track and remove that space... – Anthracoid

@blasteralfred: Look at the demo. It does exactly what the OP asked for. – Thickness

Actually, it doesn't do what I'm saying. See my update: jsfiddle.net/DsDQP/3 There's still a gutter on the right. – Cherise

I see there's no gutter in those examples, but I can't figure out why in my example I can't get rid of the gutter (based on my HTML/CSS). jsfiddle.net/8Mebt/8 – Cherise

@Shpigford, you need to call it after the jScrollPane function. and also after each .reinitialise().. updated demo at jsfiddle.net/gaby/8Mebt/9 – Cycloplegia

Ah perfect. This works great! Assuming no one submits some magically better answer, I'll award the bounty when Stack Overflow lets me in 22 hours. :) – Cherise

Answer 2

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.net/DsDQP/50/

Openhanded

Answer 3

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

Mervinmerwin