mCustomScrollbar Disabling scroll animation

For some reason, I can't get the scroll bar to appear when initializing via javascript, but I can by initializing via html.

The scroll bar is meant to appear inside of #popup-scroll, which has php content. This is all inside of a gallery, with the popup acting as the lightbox for each item in the loop.

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

Initializing by javascript (does not work):

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

Initializing by HTML (works):

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

The goal is to disable the scroll animation scrollInertia: 0, which can only be done through the javascript initialization.

The developer site, for reference

Ok, because the scroll bar is in a div that only appears once the lightbox / modal window is opened, I had to add the following to my script:

 live: true

So, in complete, the javascript function is this:

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

It works now.