Question

我现在正在学习jQuery并经历一本书的课程。我正在实施jScrollPane.js和jquery.mousehweel.js插件。我正在尝试将自定义滚动条应用于段落。然而，没有任何东西出现。我不知道为什么。这是我的标记：

 <h2>
            Fine Print</h2>
        <p id="fine_print">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
            deserunt mollit anim id est laborum.
        </p>

这是我的剧本：

 $(document).ready(function () {
        $("#fine_print").jScrollPane({
            scrollbarWidth: 10,
            scrollbarMargin: 10,
            showArrows: false
        });
    });

以下是我对stylesheets / js文件的链接。

 <head>
<title>Hello jQuery World!</title>
<link rel="stylesheet" href="base.css" type="text/css" media="screen" charset="utf-8" />
<!-- styles needed by jScrollPane -->
<link type="text/css" href="jScrollPane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="jScrollPane.js"></script>
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<!--<script type="text/javascript" src=""></script>-->

这是我从书中得到的CSS：

 #fine_print 
 {
 height:50px;
 overflow:auto;
 margin:0;
 }

我不确定是否还需要其他任何东西。我想我会用一本代码书填满整个页面，提供我认为需要的东西。如果还需要其他任何东西，我会提供。

Answer 1

我认为您不能直接在<p>元素上应用jScrollPane。

该插件期望您拥有以下结构：

<div id="use_jScrollPanel_on_this">
   <p>
      ...
   </p>
</div>

就一个容器来包装要滚动的元素。

插件代码的快速视图显示了这一行：

pane = $('<div class="jspPane" />')
              .css('padding', originalPadding).append(elem.children());

它创建一个DIV并将“elem”的内容附加到其中。现在“elem”是你调用.jScrollPane（）的元素。如果直接在<p>元素上调用它，则创建的DIV中不会附加任何内容，因为段落没有子项（.children（）不检索文本节点。）

这里有两个小提示，显示你的工作和工作解决方案（包装段落的容器）：

Applied on <p>（不工作）
With <p> wrapped in a DIV（工作）

还要确保CSS文件被正确引用，否则整个jscrollpane将无法正常工作，因为它不会显示正确创建的嵌套容器。

jQuery JScrollPane没有显示p标签的滚动条

1 个答案: