0

javascriptで初期化するとなぜかスクロールバーが表示されないのですが、htmlで初期化すると表示されます。

#popup-scrollスクロール バーは、コンテンツを持つの内部に表示されるようになっていphpます。これはすべてギャラリー内にあり、ポップアップはループ内の各アイテムのライトボックスとして機能します。

       <?php 
   $the_query = new WP_Query(array(
    'post_type' => 'post')); while ( $the_query->have_posts() ) : $the_query->the_post();?>
    <?php 
      echo'<figure><a class="popup-with-zoom-anim" href="#'.$post->post_name.'">'.the_post_thumbnail().'<div class="title"><h2>'.$post->post_title.'</h2></div></a></figure>';

    echo'<div id="'.$post->post_name.'" class="zoom-anim-dialog mfp-hide">
<div id="popup-scroll">'.$content.'</div></div>'; ?>

   <?php endwhile; wp_reset_postdata(); ?>

JavaScript による初期化 (動作しません):

<script>
    (function($){
        $(window).on("load",function(){
            $("#popup-scroll").mCustomScrollbar({scrollInertia: 0});
        });
    })(jQuery);
</script>

HTMLによる初期化（動作）：

<div id="popup-scroll" class="mCustomScrollbar" data-mcs-theme="dark">
  <!-- the content -->
</div>

目標は、スクロール アニメーションを無効にするscrollInertia: 0ことです。これは、javascript の初期化によってのみ実行できます。

参考までに開発者サイト

4

1 に答える 1

0

わかりました。スクロール バーは、ライトボックス / モーダル ウィンドウを開いたときにのみ表示される div にあるため、スクリプトに次のコードを追加する必要がありました。

 live: true

したがって、完全なJavaScript関数は次のとおりです。

 <script>
    (function($){
        $(window).on("load",function(){
            $("#popup-scroll").mCustomScrollbar({
                scrollInertia: 0,
                live: true
            });
        });
})(jQuery);
</script>

それは今動作します。

于 2016-08-01T00:25:00.583 に答える