Question

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

但似乎并没有与我合作：我添加了必要的链接，以及JQuery ofcourse

<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值为overflow：auto;

我也试过溢出：隐藏;但这也没有奏效。我仍然坚持使用丑陋的滚动条。我没有收到任何JScript错误。怎么了？

Answer 1

之前我使用过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>

Answer 2

您的HTML中的类名称是“workdescription”，但您使用“.work-description”作为选择器。这似乎是问题;）

JScrollpane不会样式滚动条

2 个答案: