title: Disable element scrolling with keyboard arrows
body: <p><a href="https://jsfiddle.net/5xo85L9f/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <p>So I'm trying to disable scrolling of a div when another div is visible.</p>
  
  <p>The code bellow I'm using does just that, but only when using mousewheel to scroll.</p>
  
  <p>If I click the scrollbar and drag it, or if I focus the div and use keyboard down button, the scrolling still happens.</p>
  
  <p>Why is that and how can I solve my problem (possibly without overlaying a transparent element over my scrollbar or similar "hacks")?</p>
  
  <pre><code>$('#element').on('scroll mousewheel keydown keypress keyup', function (event) {
      const element = $(event.currentTarget);
      const shouldScroll = false;
  
      if (!shouldScroll) {
          event.preventDefault();
          event.stopPropagation();
          return false;   
      }
  });
  </code></pre>