title: How to determine where the current visible vertical location inside a jquery dialog is?
body: <p>I have a case where I am using a <a href="https://jqueryui.com/dialog/" rel="nofollow noreferrer">jquery ui dialog</a> and I have any <strong><em>html table</em></strong> in the dialog where the dialog is fixed height:</p>
  
  <pre><code>$("#modalDialogContainer").dialog({
      resizable: false,
      height: 700,
      autoOpen: false,
      width: 1050,
      modal: true,
  </code></pre>
  
  <p>I call an <strong><em>AJAX</em></strong> query from a button click and I want to use <a href="http://malsup.com/jquery/block/" rel="nofollow noreferrer">jquery UI blockUI plugin</a> to show a "loading" message.  Something like this:</p>
  
  <pre><code>   $("#myTableInsideDialog").block({
                  css: {
                      top: '200px',
                      bottom: "",
                      left: ''
                  },
                  centerY: false, baseZ: 2000, message: $("#SavingMessage")
              });
  </code></pre>
  
  <p>The issue I have is that the content in the dialog is longer than the height of the dialog 
  and I given the dialog is <strong>FIXED</strong> height so that causes the dialog to have a vertical scroll bar. </p>
  
  <p>Having the scroll bar is fine (that's actually what I want) but the knock on effect is that 
  because of that <strong>depending if the user has scrolled down or not, the blockUI message is not centered (or even visible on the screen) vertically</strong>.  </p>
  
  <p><strong>Question:</strong> Is there anyway I can detect what is visible areas inside a dialog that has a vertical scroll bar to vertically align the block message properly?</p>
  
  <p>Above as you can see its hard coded to be 200px from the top so it works great if the user hasn't scrolled down but you can't see the message if the user has scrolled down the whole way</p>
  
  <p>In short, if i am at the top of the scroll, then i would have this:</p>
  
  <pre><code>$("#myTableInsideDialog").block({
              css: {
                  top: '200px',
                  bottom: "",
                  left: ''
              },
              centerY: false, baseZ: 2000, message: $("#SavingMessage")
          });
  </code></pre>
  
  <p>if i am at the bottom of the scroll, then i would want this:</p>
  
  <pre><code> $("#myTableInsideDialog").block({
              css: {
                  top: '',
                  bottom: "200px",
                  left: ''
              },
              centerY: false, baseZ: 2000, message: $("#SavingMessage")
          });
  </code></pre>