JScrollpane不會為滾動條設置樣式

Question

我有一個需要滾動的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 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”作為選擇器。 看來這就是問題;）