jQuery滚动窗格未显示p标记的滚动条_Jquery_Html_Jquery Ui_Jquery Plugins

jQuery滚动窗格未显示p标记的滚动条

jquery html jquery-ui jquery-plugins

jQuery滚动窗格未显示p标记的滚动条,jquery,html,jquery-ui,jquery-plugins,Jquery,Html,Jquery Ui,Jquery Plugins,我现在正在学习jQuery，并且正在复习一本书的课程。我正在实现jScrollPane.js和jquery.mousehweel.js插件。我正在尝试对段落应用自定义滚动条。然而，什么也没有出现。我不知道为什么。以下是我的标记： <h2> Fine Print</h2> <p id="fine_print"> Lorem ipsum dolor sit amet, consectetur adi

我现在正在学习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>

这里是我指向样式表/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>-->

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

我认为您不能直接在

元素上应用jScrollPane
如果您具有以下结构，则该插件需要更多：
<div id="use_jScrollPanel_on_this">
   <p>
      ...
   </p>
</div>



...


换句话说，包装元素以使其可滚动的容器
插件代码的快速视图显示以下行：
pane = $('<div class="jspPane" />')
              .css('padding', originalPadding).append(elem.children());

pane=$（“”）
.css（'padding'，originalPadding）.append（elem.children（））；

它创建一个DIV并将“elem”的内容附加到其中。现在，“elem”是您调用的.jScrollPane（）元素。如果直接在
元素上调用它，则不会在创建的DIV中追加任何内容，因为该段落没有子元素（.children（）不会检索文本节点）
这里有两个小提琴，显示您的不工作和工作解决方案（用一个容器包装段落）：

（不工作）
（工作）


还要确保CSS文件被正确引用，否则整个jscrollpane将无法工作，因为它无法正确显示它创建的嵌套容器。
我在标记中采用了这一方法，因为我能够找到它们的源代码，并且看到它们也将id直接应用于
标记，包装元素不必是
，它可以是
元素，但必须有一个容器。我认为元素应该被包装的事实是由渐进式增强驱动的：如果javascript被禁用，由于包装器上的overflow:auto，元素将可以使用本机滚动条滚动
<div id="use_jScrollPanel_on_this">
   <p>
      ...
   </p>
</div>

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