title: HTML `dialog` element: scroll content independently of background
body: <p>I am trying to use the <code>dialog</code> element.</p>
  
  <p>When the dialog/modal is closed, the body should be scrollable.</p>
  
  <p>When the dialog/modal is open, if it has large contents, the dialog/modal should be scrollable.</p>
  
  <p>However, when the dialog/modal is open, I don't want scroll to apply to both the dialog/modal <em>and</em> the body background, which is what it seems to do by default.</p>
  
  <p>Example: <a href="https://output.jsbin.com/mutudop/3" rel="nofollow noreferrer">https://output.jsbin.com/mutudop/3</a>.</p>
  
  <p>How can I make scroll apply only to the dialog/modal contents, when the dialog/modal is open?</p>
  
  <p>Note: I am only interested in solutions using the native <code>dialog</code> element.</p>