javascript - jscrollpane 不显示任何内容

Question

我使用 jscrollpane 来自定义滚动条，但它不显示任何内容。我用的是chrome浏览器。我有这个:

$(div).jScrollPane({showArrows: true});

之前，我包含以下文件:

<script src="/js/jquery-1.4.4.js" type="text/javascript"></script>
<script src="/js/jquery.mousewheel.js"></script>
<script src="/js/jquery.jscrollpane.js"></script>

加载网站后，我可以使用元素检查器看到:

<div style="overflow: hidden; padding: 0px; width: 500px; position: absolute; background-
color: rgb(100, 25, 100); -webkit-transition: all 5000ms linear; transition: all 5000ms linear; left: 200px; top: 50px; height: 500px; opacity: 1;" draggable="false" id="0">

<div class="jspContainer" style="width: 0px; height: 0px;">
<div class="jspPane" style="top: 0px; left: 0px; width: 0px;">
<img draggable="false" src="http://localhost:8080/TestApps/application/resources/Desert.jpg" id="0.1" style="position: absolute; -webkit-transition: none; transition: none; left: 0px; top: 0px; width: 80px; height: 80px; opacity: 1;">
<img draggable="false" src="http://localhost:8080/TestApps/application/resources/paisaje.jpg" id="0.2" style="position: absolute; -webkit-transition: all 5000ms linear; transition: all 5000ms linear; left: 200px; top: 80px; width: 320px; height: 480px; opacity: 1;">

</div>
</div>
</div>

有人可以帮我吗？提前致谢

Answer 1

我在所有浏览器中都显示了它，看看 sample .

问题可能在于 head 标记之间包含所有必要的脚本。

jScrollpane 运行所需的最少脚本:

    <!-- latest jQuery direct from google's CDN -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <!-- the mousewheel plugin -->
    <script type="text/javascript" src="script/jquery.mousewheel.js"></script>
    <!-- the jScrollPane script -->
    <script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>

并在加载时显示滚动条和箭头:

      $(function()
        {
            $('.scroll-pane-split').jScrollPane(
                {       
                    autoReinitialise: true,
                    showArrows: true,
                    verticalArrowPositions: 'split',
                    horizontalArrowPositions: 'split'
                }
            );
        });

HTML:

  <div class="scroll-pane-split">
   <!--- Your Content -->
  </div>

CSS:

  .scroll-pane-split
        {
            width: 100%;
            height: 400px;  /* Got to be set so the jScrollpane can function */
            overflow: auto;
        }

看看这是否有帮助。如果您需要进一步的帮助，请告诉我。