jQuery ScrollPane не отображает полосу прокрутки для тега p - PullRequest
Новая
       4

jQuery ScrollPane не отображает полосу прокрутки для тега p

2 голосов
/ 10 февраля 2012

Я изучаю 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;
 }

Я не уверен, нужно ли что-нибудь еще. Я думал, что предоставлю то, что, по моему мнению, необходимо, заполнив всю страницу книгой с кодом. Если что-нибудь еще понадобится, я предоставлю это.

1 Ответ

1 голос
/ 10 февраля 2012

Не думаю, что вы можете напрямую применить jScrollPane к элементу <p>.

Плагин ожидает, что у вас будет следующая структура: 

<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 () не получает текстовые узлы).

Вот две скрипки, которые показывают, что вы не работаете, и рабочий раствор (с контейнером, заключающим абзац):

Также убедитесь, что на CSS-файл правильно ссылаются, иначе вся jscrollpane не будет работать, так как не будет отображать вложенные контейнеры, которые она создает правильно.

...