JSFiddle - React, Tailwind, and code Playground
HTML
<strong>Review the console for horizontal scroll direction</strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tristique, arcu a convallis rhoncus, turpis nunc laoreet felis, non volutpat ligula urna consectetur neque. Nam molestie tincidunt dui, et pharetra dolor vulputate quis. Curabitur eu semper purus, non laoreet nunc. Mauris in posuere est. Nunc a tempus sem, in mattis turpis. Donec condimentum dictum augue, vitae porta nibh tincidunt nec. Praesent sit amet elit nec lorem mattis cursus. Nulla ullamcorper, mauris vitae viverra aliquam, est quam iaculis enim, sit amet semper nibh tortor quis eros. Nulla viverra at orci eget varius. Aliquam erat volutpat. Aliquam mollis porta sem. Praesent interdum tincidunt mi, quis mollis lectus rhoncus sed. Vestibulum sem lorem, tincidunt congue nisl nec, malesuada adipiscing ipsum. Morbi in porttitor velit. Curabitur ac nibh vitae nisl euismod blandit. Phasellus posuere est quis nisl porttitor tempus ut ut lacus.
Curabitur suscipit porta est, in ultrices odio malesuada non. Suspendisse malesuada erat eros, et venenatis erat aliquet vitae. Praesent consectetur dictum lacus, a adipiscing risus molestie vel. Quisque aliquet quam ut condimentum consectetur. Cras vitae mi eu purus lobortis gravida a iaculis mi. Cras pretium felis est, vel interdum orci semper eget. Donec blandit imperdiet urna, id dapibus dolor auctor ornare. Etiam nec mauris est. Duis non pretium lectus.
Phasellus consectetur rutrum dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas gravida massa magna, vel eleifend felis tincidunt vel. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis sem lorem, consectetur quis varius nec, dapibus in lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec suscipit purus ut laoreet bibendum. Fusce faucibus ac neque id aliquam. Aenean suscipit orci a ipsum commodo laoreet. Nunc...
CSS
body {
white-space: nowrap;
height: 700px;
}
JavaScript
var lastScrollLeft = 0;
$(window).scroll(function() {
var documentScrollLeft = $(document).scrollLeft();
if (lastScrollLeft < documentScrollLeft) {
console.log('scroll right');
} else
{
console.log('scroll left');
}
lastScrollLeft = documentScrollLeft;
});