Как отключить горизонтальную полосу прокрутки в jScrollPane (JQuery)?

Question

Не могли бы вы, ребята, сообщить мне, как лучше всего отключить горизонтальную полосу прокрутки?

У меня есть div с width: 100% и height :280px.Когда у нас длинный непрерывный текст (без пробелов), мы получаем горизонтальную полосу прокрутки.

Кстати, я использую jscrollPane.

Будем благодарны за любые предложения.

Answer 1

Что я нашел в jScrollPane - документация объекта настроек :

contentWidth - int (по умолчанию не определено)

Ширина содержимого панели прокрутки. Значение по умолчанию undefined позволит jScrollPane рассчитать ширину его содержание. Однако в некоторых случаях вы захотите отключить это (например, чтобы предотвратить горизонтальную прокрутку или где расчет размера содержимое не дает достоверных результатов)

Таким образом, чтобы избавиться от горизонтальных полос, просто установите ширину содержимого ниже ширины контейнера.

Пример:

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

Answer 2

Ответ от Sławek Wala (contentWidth: '0px') - действительно волшебная палочка :)

В IE8 ненужная горизонтальная полоса прокрутки часто появляется на эластичных контейнерах.Но это только часть проблемы: когда появляется горизонтальная полоса прокрутки , содержимое переполняется как вертикальным желобом, так и полосой прокрутки .
Так что, если отключить горизонтальную полосу прокрутки, просто сделав ее невидимой (как предлагают другие ответы),вторая часть проблемы остается.

contentWidth: '0px' устраняет оба симптома.

Однако knowncitizen был прав, '0px' делает что-то странное с jScrollPane, потому чтоcontentWidth - это свойство integer (кстати, contentWidth: 'foo' дает нам тот же симпатичный результат).
Чтобы избежать непредсказуемых эффектов, можно использовать любое положительное, но достаточно малое число, например: contentWidth: 1

Answer 3

Это довольно устаревший вопрос.Но в случае, если у кого-то есть такая же проблема, как у нас с вами:

, поскольку я не нашел ни свойства, ни вызова API для этого, я использовал простое решение - отключено через CSS:

.jspHorizontalBar { display: none !important; }

Не очень элегантный способ, но сэкономленное время на изучение или «взлом» кода jScrollPane.

Answer 4

Передача horizontalDragMaxWidth: 0 в опции.

Answer 5

Мне удалось сделать это с помощью CSS.

Поскольку родительский класс должен иметь класс horizontal-only, когда мы хотим использовать только горизонтальную черту, я добавил класс jspVerticalBar в качестве дочернего, так что когда он появляется ТОЛЬКО под классом horizontal-only, он будетне отображать это.Он все равно будет работать, если вы установили вертикальное и горизонтальное на одной странице.

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

Answer 6

Ни одно из решений не сработало для меня, поэтому вот что я сделал, используя вложенные div:

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>

Answer 7

Для меня лучшим решением было добавить left: 0 !important; для классов .customSelect и .jspPane в CSS:

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

Answer 8

После попытки и неудачи с другими ответами нам пришлось взломать jScrollPane, чтобы сделать эту работу В jquery.jscrollpane.js, строка 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', '');

Не уверен, насколько это безопасно, но это работает для нас.