title: Temporarily remove event listener and then add it right back after certain actions
body: <p>I have a react app with a div that is scrollable.
  e.g.</p>
  
  <pre><code>&lt;main id="main" onScroll={this.handleScroll}&gt;
  </code></pre>
  
  <p>How do I temporarily remove the onScroll event listener from main?
  and then add it right back after doing certain actions?</p>
  
  <p>I have two ways of getting access to the element</p>
  
  <pre><code>document.getElementById('main')
  </code></pre>
  
  <p>and</p>
  
  <pre><code>$('#main')
  </code></pre>
  
  <p>I have tried to inspect the element returned but I don't seems to find the onScroll property where this.handleScroll has been attached.
  I would like to temporarily remove it and add it right back if it is possible.</p>
  
  <p>I am trying to create a scrollSpy effect.
  In my navbar I set the section I and then scroll the div with id <code>'main'</code>. However since I use the onScroll event listener on main to also detect what is on screen to detect the section activated, this is causing some conflict.  Therefore I need to temporarily suspend the event listener while doing things in the navbar.</p>