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.

Frowst

Answer 1

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'
});

Abet

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

horizontalDragMaxWidth: 0 did not worked but contentWidth: '0px' worked for me. Thanks for sharing.. Up Vote for this. – Motheaten

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

Answer 2

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

Grisham

Answer 3

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.

Saintly

+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. – Feeder

This would hide the scrollbar but also make in impossible to see the content outside the visible area! – Butyl

Answer 4

Pass horizontalDragMaxWidth: 0 to the options.

Mercier

Answer 5

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>

Copier

Answer 6

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; }

Paragraphia

Answer 7

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.

Spec

Answer 8

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;
}

Distortion