JScrollpane不会设置滚动条的样式

JScrollpane will not style scrollbar

本文关键字：样式 滚动条 设置 JScrollpane      更新时间：2023-09-26

我需要一个能够滚动的div。不幸的是，默认的浏览器非常丑陋，这是我试图使用JScrollpane来解决的一个难题。

然而，它似乎并不配合我：我添加了必要的链接，当然还有JQuery

<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />

它们与我的文件结构相对应，并使用调用了脚本

<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider(); 
        $('.work-description').jScrollPane();
    });
  </script>

我的div似乎也已经就位：

<div class="workdescription" id="Plumbing">
                    <div id="shop">
                    <div class="item" data-id="1" data-name="This here is a very large piece of information" data-price="47.50">
                        <p><button class="add-to-cart" type="button">Add</button></p>
                        <p class="itemPrice">This is about the longest sentence you'll get</p>
                    </div>

            </div>

CSS值溢出：auto；

我也尝试过溢出：隐藏；但这也没有奏效。我仍然被丑陋的滚动条卡住了。我没有收到任何JScript错误。这是怎么回事？

我以前使用过jScrollPane，您基本上需要一个容器，一个将用作包装的段落，然后是对jScrollPane的调用，如果将具有滚动条的容器来自ajax响应，则还需要重新初始化该调用。

根据你的代码，我假设你的html看起来像这样：

<div class="workdescription" id="Plumbing">
<p>
                    <div id="shop">
                    <div class="item" data-id="1" data-name="This here is a very large piece of information" data-price="47.50">
                        <p><button class="add-to-cart" type="button">Add</button></p>
                        <p class="itemPrice">This is about the longest sentence you'll get</p>
                    </div>
                    </div>
</p>
</div>

然后您的选择器，只需在html后面包含脚本，这样您就不需要将脚本包装在window.load（）.上

<script>
$('.workdescription').jScrollPane({autoReinitialise: true});
</script>

HTML中的类名是"workdescription"，但您使用了".work-description"作为选择器。这似乎就是问题所在；）

相关文章：