jScrollPane 的基本样式
我是 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 中的类，我可以看到这是错误的应用程序。
希望我已经把我的问题说清楚了。预先感谢您花时间解释我确信这是一个非常明显的菜鸟错误。
I am a beginning user of jquery. I see that even the most simple questions in this forum tend to be rather advanced of my understanding, but I am at a loss for finding the solution to my specific problem elsewhere. I have looked for about an hour here, and I can't find a real solution to my issue (as it is largely just inexperience).
I have downloaded all of the files associated with jScrollPane, and have dropped the 'script' and 'styles' folders into my site's folder (my site is local). I simply want to make my scrollbar more narrow and a different color, and I can't seem to figure out exactly how that's done.
<head>
<script type="text/javascript">
$(document).ready(function()
{
$('.scroll-pane').jScrollPane(
{showArrows: true
});
});
</script>
</head>
The show arrows action works, but I can't make any other changes the way I would expect to with CSS (width, color). I see that jquery.jscrollpane.css contains classes for the selectors that I want to manipulate, but I don't know how to apply them. The only selector that appears in my html is:
<div class="scroll-pane">
I don't know how to bring .jspVerticalBar for example, into my html so that it can be styled. All I know how to do is use it as a class in the previously mentioned div, and I can see that that is the wrong application.
Hopefully I have made my question clear. Thanks in advance for taking the time to explain what I'm sure is a very obvious rookie error.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我刚刚遇到你的问题，但如果你仍在寻找答案......
jscrollpane 的样式位于 css 文件“jquery.jscrollpane.css”中。设置轨道宽度的样式有“.jspVerticalBar”和“.jspVerticalBar”。 “.jspHorizontalBar”。
如果您也使用箭头，这些也会影响轨道：“.jspVerticalBar .jspArrow”& “.jspHorizontalBar .jspArrow”。
所有这些中的默认“px”是“16px”。您需要将所有四个更改为相同的值以使轨道更窄。
要改变颜色，由背景设置颜色。我使用的是菱形样式，因此没有在“jquery.jscrollpane.css”本身中更改这些内容，仅在菱形 css 中进行更改。
如果您使用 jquery ui 中的箭头（图标的方形 png），则必须通过调整“.jspArrowUp”等的坐标来改变箭头的位置以使其居中。
I've just come across your question, but if you're still looking for an answer…
THe styling of jscrollpane is in the css file "jquery.jscrollpane.css". The styles that set the width of the track are ".jspVerticalBar" & ".jspHorizontalBar".
If you are using arrows as well, these also affect the track: ".jspVerticalBar .jspArrow" & ".jspHorizontalBar .jspArrow".
The default "px" in all these is "16px". You will need to change all four to the same value to make the track narrower.
To change the colours, it's the background that sets the colour. I'm using the lozenge style, so haven't altered these in "jquery.jscrollpane.css" itself, only in the lozenge css.
If you're using arrows from jquery ui (the square png of icons) you'll have to alter the position of the arrows by adjusting the coordinates of ".jspArrowUp" etc. to centre them.