Question

你们能告诉我什么是禁用horiontal滚动条的最佳方法吗？

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

顺便说一下，我正在使用jscrollPane。

任何建议都将不胜感激。

Answer 1

我在 jScrollPane - 设置对象文档中找到的内容：

contentWidth - int（默认未定义）

滚动窗格内容的宽度。默认值为   undefined将允许jScrollPane计算它的宽度   内容。但是，在某些情况下，您需要禁用此功能（例如，至   防止水平滚动或计算大小的位置   内容不会返回可靠的结果）

因此，为了摆脱水平条，只需将内容宽度设置为低于容器宽度。

示例：

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

Answer 2

SławekWala（contentWidth: '0px'）的回答是一个非常神奇的魔杖:)

在IE8中，不必要的水平滚动条经常出现在弹性容器上。但这只是麻烦的一部分：当水平滚动条出现时，内容通过垂直装订线和滚动条溢出。
因此，如果一个人禁用水平滚动条只是让它看不见（正如其他答案所示），那么麻烦的第二部分仍然存在。

contentWidth: '0px'解决了这两种症状。

然而， knowncitizen 是正确的，'0px'对jScrollPane做了一些奇怪的事情，因为contentWidth是一个整数属性（btw contentWidth: 'foo'给了我们相同的漂亮结果）为了避免不可预测的影响，可以使用任何正数但足够小的数字：contentWidth: 1

Answer 3

这是一个非常过时的问题。但是如果有人和你一样有问题：

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

.jspHorizontalBar { display: none !important; }

不是很优雅的方式，但节省了调查或“黑客”jScrollPane代码的时间。

Answer 4

将horizontalDragMaxWidth: 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完成此任务。

由于父级应该有类horizontal-only，所以当我们只想要一个水平条时，我将小组jspVerticalBar添加为小孩，以便它只出现在horizontal-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中为类left: 0 !important;和.customSelect添加.jspPane：

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

如何在jScrollPane（JQuery）中禁用水平滚动条？

8 个答案: