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.

enter image description here

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.

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, Jun 20 '11 at 11:24
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? — Tobias Cohen, Jun 20 '11 at 13:13
@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. :) — Shpigford, Jun 20 '11 at 13:15

Gabriele Petrioli · Accepted Answer · 2011-06-20T13:16:48.747

8

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.

edited Jun 20 '11 at 13:16

answered Jun 20 '11 at 11:26

Gabriele Petrioli

173,972
30
239
291

1

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... – Alfred Jun 20 '11 at 11:34
@blasteralfred: Look at the demo. It does exactly what the OP asked for. – Lightness Races in Orbit Jun 20 '11 at 11:44
Actually, it doesn't do what I'm saying. See my update: http://jsfiddle.net/DsDQP/3/ There's still a gutter on the right. – Shpigford Jun 20 '11 at 11:49
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). http://jsfiddle.net/8Mebt/8/ – Shpigford Jun 20 '11 at 12:08
@Shpigford, you need to call it after the `jScrollPane` function. and also after each `.reinitialise()`.. updated demo at http://jsfiddle.net/gaby/8Mebt/9/ – Gabriele Petrioli Jun 20 '11 at 12:12
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. :) – Shpigford Jun 20 '11 at 13:13

score 6 · Answer 2 · edited Aug 13 '12 at 09:24

6

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/

edited Aug 13 '12 at 09:24

Rüdiger Hanke

6,075
2
35
44

answered Aug 13 '12 at 07:49

barboaz

93
1
5

score 0 · Answer 3 · answered May 07 '13 at 09:11

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

jScrollPane: Remove scrollbar gutter?

3 Answers3