var el = document.querySelector('el');
var sc = el.scrollLeft;
el.onscroll = function(e){
	if(sc != this.scrollLeft){
		console.log('горизонтальный скролл');
	}
sc = el.scrollLeft;	
};

<style>
.cl1{
  overflow-x: scroll;
}
.cl2{
	height: 50px;
	width: 900px;
}
</style>

<div class="cl1"><div class="cl2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et molestiae at sed, ad unde nam quisquam alias tempora consequatur atque. Vero saepe consequuntur aspernatur aperiam repellat autem veniam consectetur sint distinctio, assumenda quaerat, fuga cum pariatur dolorem. At quisquam voluptatem ullam, quod tempora soluta in fuga commodi ipsum, necessitatibus eos eum corporis voluptates? Debitis voluptatibus suscipit omnis, asperiores assumenda sequi esse harum repellendus similique labore est ut architecto dolore, consectetur iure facere nostrum laborum, ea adipisci, culpa reprehenderit. Incidunt facilis assumenda eius provident libero ducimus neque enim eaque cumque eligendi, aliquid omnis impedit repellat similique inventore. Non porro, consequatur aliquam! Commodi libero ex repudiandae magni doloremque, sequi quia consectetur. Reprehenderit labore, deleniti iure sunt provident eius cum dolore laborum. Culpa, modi, ut hic molestias nihil odio architecto. Dolor odit, accusantium quibusdam nisi aperiam ad libero aliquam dolores amet saepe nihil, tempore rem. Doloribus similique est expedita quos dolor consequuntur officiis! Ipsa, modi illum facere vero eius assumenda quae, aut minima nesciunt sunt voluptate quibusdam quisquam unde, harum ex fugiat reiciendis officia voluptatibus dolore suscipit ut!</div></div>

<script>
	var el = document.querySelector('.cl1');
	var sc = el.scrollLeft;
	el.onscroll = function(e){
		if(sc != this.scrollLeft){
			console.log('горизонтальный скролл');
		}
		sc = el.scrollLeft;	
	};
</script>