javascript - 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();