21

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

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

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

任何建议，将不胜感激。

4

8 回答 8

38

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

contentWidth - int（默认未定义）

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

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

例子：

$('#element').jScrollPane({
    contentWidth: '0px'
});
于 2012-03-09T10:21:57.850 回答
9

Sławek Wala ( )的答案contentWidth: '0px'是一根真正的魔杖 :)

在 IE8 中，不必要的水平滚动条经常出现在弹性容器上。但这只是问题的一部分：当水平滚动条出现时，内容会通过垂直排水沟和滚动条溢出。
因此，如果禁用水平滚动条只是使其不可见（正如其他答案所暗示的那样），那么问题的第二部分仍然存在。

contentWidth: '0px'修复这两种症状。

然而，knowncitizen是对的，'0px' 对 jScrollPane 做了一些奇怪的事情，因为 contentWidth 是一个整数属性（顺便说一句contentWidth: 'foo'，我们得到了同样漂亮的结果）。
为了避免不可预测的影响，可以使用任何正但足够小的数字，如下所示：contentWidth: 1

于 2013-03-05T10:06:58.363 回答
5

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

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

.jspHorizontalBar { display: none !important; }

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

于 2012-01-23T17:27:02.863 回答
3

传递horizontalDragMaxWidth: 0给选项。

于 2012-06-15T12:56:05.143 回答
1

这里没有一个解决方案对我有用，所以这是我使用嵌套 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>
于 2013-07-28T10:03:20.707 回答
1

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

由于父类应该有类horizontal-only，当我们只想要一个水平条时，我将类添加jspVerticalBar为子类，这样当它只出现在horizontal-only类下时，它就不会显示它。如果您在同一页面上设置了垂直和水平，它仍然可以工作。

div.horizontal-only .jspVerticalBar { display:none; }
于 2013-11-04T16:34:16.527 回答
0

在尝试其他答案但失败后，我们不得不破解 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', '');

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

于 2014-06-23T16:46:27.127 回答
0

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

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

于 2016-02-28T12:55:29.763 回答