How do I disable horizontal scrollbar in jScrollPane (JQuery)?

Question

Can you guys please let me know what is the best way to disable the horiontal scroll bar?

I have div with width: 100% and height :280px. When we have long continuous text (without any spaces), we are getting a horizontal scrollbar displayed.

Btw I am using jscrollPane.

Any suggestions would be appreciated.

score 38 · Answer 1 · answered Mar 09 '12 at 10:21

38

What I have found in jScrollPane - settings object documentation:

contentWidth - int (default undefined)

The width of the content of the scroll pane. The default value of undefined will allow jScrollPane to calculate the width of it's content. However, in some cases you will want to disable this (e.g. to prevent horizontal scrolling or where the calculation of the size of the content doesn't return reliable results)

So to get rid of horizontal bars, just set content width lower than the container width.

Example:

$('#element').jScrollPane({
    contentWidth: '0px'
});

answered Mar 09 '12 at 10:21

Sławek Wala

398
3
5

2

This does something weird with the jScrollPane and makes the width unpredictable. (Didn't dig into it much, but tried the `horizontalDragMaxWidth: 0` trick and it worked more predictably. – knowncitizen Jun 21 '12 at 14:04
2

`horizontalDragMaxWidth: 0` did not worked but `contentWidth: '0px' ` worked for me. Thanks for sharing.. Up Vote for this. – steve Sep 25 '13 at 11:12
I don't know why this answer has so many upvotes but setting `contentWidth: '0px'` removes verticall scroll bar as well and makes the plugin unusable... – King Julien Jan 17 '15 at 22:07

Sago Sr. · Answer 2 · 2017-11-10T18:21:03.443

The answer from Sławek Wala (contentWidth: '0px') is a really magic wand :)

In IE8 unnecessary horisontal scrollbar appears often upon elastic containers. But that's only part of the trouble: when horisontal scrollbar appears the content overflows through both vertical gutter and scrollbar.
So, if one disables horisontal scrollbar just making it invisible (as the other answers suggest) then the second part of the trouble remains.

contentWidth: '0px' fixes the both symptoms.

However, knowncitizen was right, '0px' does something weird with the jScrollPane because contentWidth is an integer property (btw contentWidth: 'foo' gives us the same pretty result ).
To avoid unpredictable effects one can use any positive but small enough number like this: contentWidth: 1

score 6 · Answer 3 · answered Jan 23 '12 at 17:27

6

This is quite outdated question. But in case someone has same issue as you and I:

as I haven't found any property or API call to achieve this, I used simple solution - disabled via CSS:

.jspHorizontalBar { display: none !important; }

Not very elegant way, but saved time of investigating or 'hacking' jScrollPane code.

answered Jan 23 '12 at 17:27

zergussino

821
11
14

+1 Same here, its mad that this plugin doesn't have a simple option to force only vertical scrolling. Or I would of thought that it would of read the overflow-x/y property. – John Magnolia Oct 15 '12 at 11:27
This would hide the scrollbar but also make in impossible to see the content outside the visible area! – King Julien Jun 28 '14 at 13:45

score 3 · Answer 4 · edited Jun 15 '12 at 14:08

3

Pass horizontalDragMaxWidth: 0 to the options.

edited Jun 15 '12 at 14:08

Matthias

7,432
6
55
88

answered Jun 15 '12 at 12:56

pixelmanya

49
2

score 1 · Answer 5 · answered Jul 28 '13 at 10:03

None of the solutions worked for me here so here's what I did using nested divs:

JS

$('#scrollpane').jScrollPane();

HTML

<div id="scrollpane" style="max-height: 400px; width: 700px">
    <div style="overflow:hidden; width: 650px">
        Your long content will be clipped after 650px
    </div>
</div>

score 1 · Answer 6 · edited Nov 04 '13 at 16:58

I was able to accomplish this using CSS.

Since the parent should have the class horizontal-only, when we only want a horizontal bar, I added the class jspVerticalBar as a child so that when it appears ONLY under the horizontal-only class, it will not display it. It will still work if you have set the vertical and horizontal on the same page.

div.horizontal-only .jspVerticalBar { display:none; }

score 0 · Answer 7 · answered Jun 23 '14 at 16:46

After trying and failing with the other answers, we had to hack jScrollPane to make this work. In jquery.jscrollpane.js, line 171:

    pane.css('overflow', 'auto');
    // Hack: Combat size weirdness with long unbreakable lines.
    pane.css('position', 'static');
    // End hack
    if (s.contentWidth) {
            contentWidth = s.contentWidth;
    } else {
            contentWidth = pane[0].scrollWidth;
    }
    contentHeight = pane[0].scrollHeight;
    // Hack: Continued.
    pane.css('position', 'absolute');
    // End hack
    pane.css('overflow', '');

Not sure how safe it is but that works for us.

score 0 · Answer 8 · edited Feb 28 '16 at 13:17

0

For me, the best solution was in to add left: 0 !important; for classes .customSelect and .jspPane in the CSS:

.customSelect .jspPane {
 overflow-x: hidden;
 left: 0 !important;
}

edited Feb 28 '16 at 13:17

das-g

9,718
4
38
80

answered Feb 28 '16 at 12:55

Dmytro Satur

1

How do I disable horizontal scrollbar in jScrollPane (JQuery)?

8 Answers8