jScrollPane 的基本样式答案

【问题标题】：Basic styling of jScrollPanejScrollPane 的基本样式
【发布时间】：2011-12-10 04:25:42
【问题描述】：

我是 jquery 的初级用户。我发现，即使是这个论坛中最简单的问题，我的理解也往往是相当先进的，但是我在其他地方找不到解决我的具体问题的方法。我在这里找了大约一个小时，但我找不到真正解决我的问题的方法（因为这主要是缺乏经验）。

我已经下载了与 jScrollPane 相关的所有文件，并将“脚本”和“样式”文件夹放入我网站的文件夹中（我的网站是本地的）。我只是想让我的滚动条更窄并使用不同的颜色，但我似乎无法弄清楚这是如何完成的。

<head>
<script type="text/javascript">

$(document).ready(function()
{
$('.scroll-pane').jScrollPane(
{showArrows: true
    });
});

</script>
</head>

显示箭头操作有效，但我无法按照我对 CSS（宽度、颜色）的预期方式进行任何其他更改。我看到 jquery.jscrollpane.css 包含我想要操作的选择器的类，但我不知道如何应用它们。我的 html 中出现的唯一选择器是：

<div class="scroll-pane">

例如，我不知道如何将 .jspVerticalBar 带入我的 html 以便对其进行样式设置。我所知道的只是将它用作前面提到的 div 中的一个类，我可以看到这是错误的应用程序。

希望我已经把我的问题说清楚了。提前感谢您花时间解释我确信这是一个非常明显的新手错误。

【问题讨论】：

标签： jquery jscrollpane

【解决方案1】：

我刚刚遇到了你的问题，但如果你还在寻找答案……

jscrollpane 的样式在 css 文件“jquery.jscrollpane.css”中。设置轨道宽度的样式是“.jspVerticalBar”和“.jspHorizontalBar”。如果您也使用箭头，这些也会影响轨道：“.jspVerticalBar .jspArrow”和“.jspHorizontalBar .jspArrow”。所有这些中的默认“px”是“16px”。您需要将所有四个更改为相同的值以使轨道更窄。

要更改颜色，设置颜色的是背景。我使用的是菱形样式，所以没有在“jquery.jscrollpane.css”本身中改变这些，只在菱形css中。

如果您使用 jquery ui 中的箭头（图标的方形 png），您必须通过调整“.jspArrowUp”等的坐标来改变箭头的位置，以使它们居中。

【讨论】：