jQuery ScrollPane 不显示 p 标签的滚动条

发布于 2025-01-04 00:53:05 字数 2115 浏览 0 评论 0原文

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

这是我到样式表/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;
 }

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

原文

I'm learning jQuery right now and going through a book's lessons. I'm implementing the jScrollPane.js and jquery.mousehweel.js plugins. I'm trying to apply a custom scrollbar to a paragraph. However, nothing is showing up. I'm not sure why. Here's my markup:

 <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>

Here's my script:

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

Here are my links to the stylesheets/js files.

 <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>-->

Here's the css I got from the book:

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

I'm not sure if anything else is needed. I thought I would provide what I thought was required with filling the entire page with a book of code. If anything else is needed, I'll provide it.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

赏烟花じ飞满天 2025-01-11 00:53:05

我认为您不能直接在

元素上应用 jScrollPane 。

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

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

换句话说，包装元素的容器可滚动。

快速查看插件代码会显示这一行：

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

它创建一个 DIV 并将“elem”的内容附加到其中。现在“elem”是您调用 .jScrollPane() 的元素。如果直接在

元素上调用它，则创建的 DIV 中不会附加任何内容，因为该段落没有子项（.children() 不检索文本节点）。

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

Applied
（不起作用）
包裹在 DIV 中（工作）

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

I don't think you can directly apply jScrollPane on a <p> element.

The plugin expects more that you have the following structure:

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

In terms, a container wrapping the element(s) to be scrollable.

A quick view of the plugin code shows this line:

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

It creates a DIV and appends the content of "elem" into it. Now "elem" is the element you called .jScrollPane() onto. If you call it directly on a <p> element, nothing is appended in the created DIV as the paragraph has no children (.children() does not retrieve text nodes).

Here are two fiddles that shows your not working and the working solution (with a container wrapping the paragraph):

Applied on <p> (not working)
With <p> wrapped in a DIV (working)

Also make sure the CSS file is correctly referenced otherwise the whole jscrollpane won't work as it will not display the nested containers it creates correctly.

回复收藏 0 原文

~没有更多了~