Проблема полосы прокрутки jScrollPane

Question

Я работаю над сайтом, использующим Wordpress в качестве CMS, и я хотел использовать собственную полосу прокрутки внутри div на моем сайте.Я пытался использовать плагин jScrollPane, но у меня возникают проблемы с его установкой.

основной код находится в моем файле header.php, и существует соответствующий класс .scroll-paneкод в header.php:

 <style type="text/css" id="page-css"> 
            .scroll-pane
                {
                    width: 100%;
                    height: 280px;
                    overflow: auto;
                }
        </style>
    <script src="<?php bloginfo('template_url'); ?>/js/jquery-1.3.2.min.js"></script>
    <link type="text/css" href="<?php bloginfo(template_url); ?>/style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
    <script type="text/javascript" src="<?php bloginfo(template_url); ?>/js/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="<?php bloginfo(template_url); ?>/js/jquery.jscrollpane.min.js"></script>

        <script type="text/javascript"> 
            var $j = jQuery.noConflict();
            $j(document).ready(function()
            {   
                $('.scroll-pane').jScrollPane({showArrows: true});
            });
        </script> 

page.php:

< div id="sign-right">

< div class="newsBox-padding">

< div class="scroll-pane newsBox"> WP loop goes here </div></div>


CSS:
.newsBox{height:280px; overflow: auto;}

Я получаю следующую ошибку (пойман с firebug):

" $(".scroll-pane").jScrollPane is not a function
$('.scroll-pane').jScrollPane({showArrows: true}); "

IЯ думаю, что проблема в функции, поэтому я попробовал несколько предложений из разных постов и форумов, включая:

$function(){ jQuery('.scroll-pane').jScrollPane({showArrows: true});

$function(){ $('.scroll-pane').jScrollPane({showArrows: true}); });

Я проверил все ссылки на внешние файлы и убедился, что классы названывсе же они все кажутся правы.И у меня был знакомый знакомый с кодом, который тоже смотрел на него, но безрезультатно.

Я очень ценю вашу помощь!

Answer 1

У меня была эта проблема, потому что я дважды загружал jquery.

Scrollpane действительно хорошо работает при использовании в:

$(document).ready(function () {
    $('.scroll-pane').jScrollPane();
 });

Также не забудьте указать ширину и высоту в div, который вы применяете; то есть.

<div class="scroll-pane" style="width: 200px; height: 100px;"></div>

Answer 2

Может быть, я что-то здесь упускаю, никогда не использовал jscrollpane, но я не вижу вас, включая сам jquery. Также вы вызываете noconflict, а затем по-прежнему используете $ в вашей функции.

Answer 3

Я устал от проблем с этим плагином.Я работал один день, чтобы заставить его работать.Я обнаружил, что для нормальной работы ему нужен файл:

http://code.jquery.com/jquery-migrate-1.2.0.min.js

....Так что это старый плагин и поддержка не очень хорошая.

У меня есть очень простое решение для моей проблемы :):

div.scrollBar {
  width: 200px;
  height: 200px;
  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}

и

<div class="scrollBar">
<h3>Smooth</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

Вот рабочий пример: http://jsfiddle.net/ghdcmsxx/

Это здорово: D.И это даже оптимизировано для прикосновения.Вот это да.Нет JQuery, только Литт CSS и HTML.Я люблю это.

Answer 4

У меня была такая же проблема, и мне потребовались годы, чтобы решить ее.Я просто не смог найти никакого решения.

Затем я наткнулся на этот плагин для Wordpress с именем: WP jScrollPane.
Я скачал и установил его.Следуя инструкциям, появился пользовательский scrollbar.

Так что для меня это было на самом деле очень простое решение.Я был так увлечен этим сценарием, что совершенно забыл, что Wordpress также имеет свои собственные плагины.

В любом случае, я не знаю, полезно ли это для вас, но это мне очень помогло.

Answer 5

Не вижу, чтобы вы включили последнюю версию jQuery, попробуйте добавить ее.Чтобы добавить последнюю версию jQuery с помощью хоста Google:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" />

И попробуйте использовать Инструменты разработчика Chrome, а затем вкладку Ресурсы, и вы увидите, какие файлы JS действительно загружаются в Интернете.

Вы можете увидеть хороший пост в моем блоге об этих полосах прокрутки: Полосы прокрутки jQuery

Также, как сказал @kingjiv, вы используете Conflict, а затем '$'.Попробуйте удалить конфликт и используйте только:

<script type="text/javascript"> $(function () {
  $('.scroll-pane').jScrollPane();
 });
<script> 

Если это все еще не работает, jScrollPane загружается раньше, чем jQuery.Чтобы исправить это, попробуйте следующие методы:

Сначала переместите ваш

<script type="text/javascript"> $(function () {
  $('.scroll-pane').jScrollPane();
 });
<script> 

В конец после тега </body> Closing.

Если по-прежнему не работаетпопробуйте использовать Когда документ готов

<script type="text/javascript">
    $(document).ready(function () {
        $('.scroll-pane').jScrollPane();
    });
<script>

Он должен работать:)