How do you detect when the bowser window is scrolling sideways with Javascript

Question

How can I test for sideways/horizontal scrolling in a browser window with Javascript/Jquery, and then perform an action when movement is detected?

Answer 1

You can bind to the window scroll event and use the last scrollLeft position to determine if it has changed or not.

var lastPosition = 0,
    doc = $(document),
    win = $(window);

win.scroll(function() {
  var scrollPosition = doc.scrollLeft();
  
  if(lastPosition != scrollPosition) {
    lastPosition = scrollPosition;
    console.log('scroll left changed!');
  }
});

.container {
  border: 1px solid #000;
  height: 50px;
  width: 10000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
 hello
<div>

Vanilla JS

var lastPosition = 0;

window.addEventListener('scroll', function(){
  var scrollPosition = this.pageXOffset;

  if(lastPosition != scrollPosition) {
    lastPosition = scrollPosition;
    console.log('scroll left changed!');
  }
});

Answer 2

You can Use: scrollLeft() Please refer to this explanation