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