title: Is there a way to detect horizontal scroll only without triggering a browser reflow
body: <p>You can detect a browser scroll event on an arbitrary element with:</p>
  
  <pre><code>element.addEventListener('scroll', function (event) {
      // do something
  });
  </code></pre>
  
  <p>I would like to be able to differentiate between vertical scrolling and horizontal scrolling and execute actions for them independently.  </p>
  
  <p>I'm currently doing this by stashing the values of element.scrollTop, and element.scrollLeft, and then comparing them inside the event listener.  E.g. </p>
  
  <pre><code>var scrollLeft, scrollTop;
  element.addEventListener('scroll', function (event) {
      if (scrollLeft !== element.scrollLeft) {
          // horizontally scrolled
  
          scrollLeft = element.scrollLeft;
      }
  
      if (scrollTop !== element.scrollTop) {
          // vertically scrolled
  
          scrollTop = element.scrollTop;
      }
  });
  </code></pre>
  
  <p>This works fine, however from <a href="https://gist.github.com/paulirish/5d52fb081b3570c81e3a" rel="noreferrer">https://gist.github.com/paulirish/5d52fb081b3570c81e3a</a> I read that reading the scrollLeft or scrollTop values causes a reflow.  </p>
  
  <p>Is there a better way to do this without causing a browser reflow on scroll?</p>