如何禁用 jScrollPane (JQuery) 中的水平滚动条？

Question

你们能让我知道禁用水平滚动条的最佳方法是什么吗？

我有 width: 100% 和 height:280px 的 div。当我们有很长的连续文本（没有任何空格）时，我们会显示一个水平滚动条。

顺便说一句，我正在使用 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 是一个整数属性（顺便说一句 contentWidth: 'foo' 给出我们得到了同样漂亮的结果）。
为了避免不可预测的影响，可以使用任何正数但足够小的数字，如下所示：contentWidth: 1

Answer 3

这是一个相当过时的问题。但如果有人遇到与你和我相同的问题：

由于我没有找到任何属性或 API 调用来实现此目的，我使用了简单的解决方案 - 通过 CSS 禁用：

.jspHorizo​​ntalBar { display: none !important; 不是很优雅的

方式，但节省了调查或“破解”jScrollPane 代码的时间。

Answer 4

将 horizo​​ntalDragMaxWidth: 0 传递给选项。

Answer 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>

Answer 6

我能够使用 CSS 来完成此任务。

由于父级应该具有类 horizo​​ntal-only，当我们只想要一个水平条时，我添加了类 jspVerticalBar 作为子级，这样当它仅出现在 < code>horizo​​ntal-only 类，它不会显示它。
如果您在同一页面上设置了垂直和水平，它仍然有效。

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

Answer 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', '');

不确定它有多安全，但这对我们有用。

Answer 8

对我来说，最好的解决方案是在 CSS 中为 .customSelect 和 .jspPane 类添加 left: 0 !important; ：

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