Is there a way to detect horizontal scroll only without triggering a browser reflow : <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>
