javascript - How to trigger scroll of container by scrolling outside of said container -

here's dilemma: have container of content runs in centre of window. outside of container grey background gets larger or smaller depending on how big window size is. issue i'm having i'm not able scroll up/down central container if mouse outside container (it work fine if mouse in container). achieve effect see in google documents or site here. basically, i'd able scroll container point in window. things have attempted: binding mouse scroll whole body--this work, issue there no detection on mobile. binding scroll body doesn't seem work either body technically static--it's content within goes down page.

here's sample code of template below (nonhome_container scrolling):

  </pre>   <div class="full-width" id="content">     <?php    // run page loop output page content.    if ( have_posts() ) while ( have_posts() ) : the_post(); ?>       <article id="post-<?php the_id(); ?>">>         <div id = "nonhome_container">              <div id = "nonhomecontent_container_small">                   <?php if ( ! is_front_page() ) { ?>                     <h2 class="entry-title">                       <?php the_title(); // display page title ?>                     </h2>                  <?php } ?>                  <div id = "nonhome_linebreak"></div>                      <div id="contact-content">                       <?php the_content();                        // call main content of page, stuff in main text box while composing.                       // wrap in p tags                       ?>                       <?php wp_link_pages(); // display pagination links, if applicable page ?>                     </div><!-- the-content -->                  <div id = "nonhome_linebreak"></div>              </div>           </div>       </article>       <!-- #post-## -->     <?php endwhile; ?>    </div> <?php get_footer(); ?>