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

Ответ 1

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

contentWidth - int (по умолчанию undefined)

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

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

Пример:

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

Ответ 2

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

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

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

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

Ответ 3

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

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

.jspHorizontalBar { display: none !important; }

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

Ответ 4

Перейдите horizontalDragMaxWidth: 0 к параметрам.

Ответ 5

Ни один из решений не работал у меня здесь, поэтому здесь я использовал использование вложенных 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>

Ответ 6

Я смог выполнить это с помощью CSS.

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

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

Ответ 7

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

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

Ответ 8

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

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