title: Prevent drag and drop navigation onto window scrollbar
body: <p>I have a problem whereby my html application 'navigated' to the content the user would drag and drop onto it. For example, dropping a text file on the application would cause the page to navigate to it.</p>
  
  <p>I have solved this by registering an event handler on the document and attaching to dragenter, dragover, dragleave, and drop events. In the handler, I call preventDefault and stopPropagation, which works well when anything is dropped that doesn't match an expected (and handled) file type.</p>
  
  <p>The problem is the user can drop onto a vertical scrollbar (by accident or otherwise) and the handler is not hit. I assume this is because the scrollbar isn't related to the document object in the same way a different child is.</p>
  
  <p>How can I prevents a file drop on a vertical scroll bar from navigating???</p>
  
  <pre><code>var globalDnd = function (event) {
    // Prevent drag and drop navigation
    event.stopPropagation();
    event.preventDefault();
  
    // Other processing to handle certain file types
  
    return false;
  };
  
  $(document).on('dragenter dragover dragleave drop', globalDnd);
  </code></pre>
  
  <p><a href="https://jsfiddle.net/mcoe6e9d/" rel="nofollow">https://jsfiddle.net/mcoe6e9d/</a></p>
  
  <p>Created a fiddle to show the problem. Resize the preview pane until a scrollbar appears then drag and drop and file on the bar. The page will navigate. If you drop it anywhere else on the preview pane, it won't.</p>