title: Understanding getBoundingClientRect for elements outside of viewport
body: <p>I have a horizontal scroll bar as you can see here...</p>
  
  <p><a href="http://codepen.io/anon/pen/rxxEQb" rel="nofollow">http://codepen.io/anon/pen/rxxEQb</a></p>
  
  <p>It works pretty well apart from the fact that you can scroll to the right indefinitely.</p>
  
  <p>In order to limit the right-scroll (so that you can't keep scrolling right when there's no more items), I want to detect when the last button (id=lastButton) is further to the left than the link to scroll right (id=goRightLink).</p>
  
  <p>I've added these couple of console outputs to the codepen so you can follow what I'm seeing...</p>
  
  <pre><code>console.log("right of go-right-link: " + $("#goRightLink")[0].getBoundingClientRect().right);
  
  console.log("right of lastButton: " + $("#lastButton")[0].getBoundingClientRect().right);
  </code></pre>
  
  <p>I can't make any sense of the numbers - when I scroll far enough to the right for the final button (button 30) to be visible, I can the values "go-right-link: 1389, lastButton: 1313" (which is great), but if I scroll a little back to the left so that the button 30 is now off screen, I can the values "go-right-link: 1246, lastButton: 1389".  Then even weirder, I scroll a little left again and get a negative value for lastButton (-549).</p>
  
  <p>Instead of painfully describing that further here, it's probably easier to use the console output in the codepen to see how the numbers change as Button 30 is coming in and out of view.</p>
  
  <p>All I'm trying to do is establish some kind of pattern in the numbers that will tell me when I should prevent any further scroll-rights (i.e. when button 30 is visible).</p>
  
  <p>Hugely appreciate any thoughts at all!</p>
  
  <hr>
  
  <h2>------EDIT-------</h2>
  
  <p>I found a secondary solution to this (which I'm not posting as an answer since it doesn't answer the question relating to understanding getBoundingClientRect()).  I ended up simply summing all the buttons within the ul (which would give width regardless of whether it was on/off screen)...</p>
  
  <pre><code>var widthOfAllTagLis=0;
            $("#tagUl li button").each(
                                      function() {
                                        widthOfAllTagLis = widthOfAllTagLis + $(this).outerWidth(true); //passing true includes margins (as well as padding)
                                      });
  </code></pre>
  
  <p>And then adding this check before any transitions to the right...</p>
  
  <pre><code>if ($("#tagUl").width() + 5 &lt; widthOfAllTagLis) { //perform transition 
  } else {
  //don't perform transition because we can already see all the buttons
  }
  </code></pre>
  
  <p>This only works because the result of $("#tagUl").width() changes as the margin-left property changes (something I wasn't expecting!)</p>