Wordpress + jScrollPane

Question

晚上好，我正试着在Wordpress模板中使用jScrollPane，我快要发疯了，总是显示一个“无皮肤”滚动条……

此代码加载到header.php中，.portfolio-post-content仅包含文本：

<script type="text/javascript" charset="utf-8">
    $(function() {
            $('.portfolio-post-content').jScrollPane();
        });
</script>

Style.css中的元素：

.portfolio-post-content { width:130px; float:left; overflow: auto; height: 500px; }

HTML输出：

    <!-- Main Page Content Begin -->

    <div id="main"> 

      <div id="page-content" class="portfolio-container main-container-single-portfolio" style="position:relative;">

        <div class="container sidebar-left single-project">    

          <!-- Media Begin --> 
          <div class="portfolio-post-media twelve columns"></div>
          <!-- Media End -->        

          <!-- Content Begin -->       
          <div class="portfolio-post-content four columns">text...</div>
          <!-- Content End -->

头文件在加载其他.js文件之前加载jScrollPane.css。这听起来像是一个与嵌套的div元素相关的问题。

谢谢,

Answer 1

1：

<script type="text/javascript" charset="utf-8">
    var $ = jQuery.noConflict();

    $(function() {
        $('.portfolio-post-content.four.columns').jScrollPane();
    });
</script>

2：http://www.radiospeck.it/barchitects/wp-content/themes/spacing/js/jquery.mousewhell.js?ver=3.4.2

未加载

3：

.portfolio-post-content.four.columns {
   height: 200px;
}

您可以使用以下命令进行测试：

jQuery('.portfolio-post-content.four.columns').css({
    height: '200px'
}).jScrollPane();