Scrool detection

by Milomir Topic

HTML

<p id="status">Currently Scrolling: <span id="current">None</span>
</p>
<p style="width:105%;height:150%">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut felis velit. Morbi ipsum risus, egestas sit amet sagittis elementum, porttitor nec mauris. Curabitur vestibulum laoreet tortor vitae ullamcorper. Duis luctus odio eget nunc pulvinar vehicula.
  Mauris at arcu arcu. Etiam accumsan varius sem in ullamcorper. Mauris neque purus, viverra ut fringilla ut, auctor vitae enim. Proin pellentesque, odio et molestie lacinia, ipsum sapien suscipit nunc, et imperdiet justo magna quis erat. Duis non dolor
  a nunc auctor porttitor. Aenean accumsan imperdiet sem, at ultricies enim laoreet at. Vestibulum leo magna, pellentesque non dapibus a, convallis id justo. Praesent sed pharetra massa. Pellentesque habitant morbi tristique senectus et netus et malesuada
  fames ac turpis egestas. Praesent adipiscing elementum tincidunt. Nunc rutrum lacinia tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas suscipit nulla eu mauris tempor egestas auctor magna
  fermentum. Nam congue turpis luctus mauris ullamcorper convallis. Aenean vestibulum, quam at dapibus scelerisque, urna massa lacinia leo, et malesuada turpis mi vehicula enim. Etiam porttitor quam lorem. Nunc luctus ullamcorper tellus sit amet ullamcorper.
  Integer eu nisi quis libero imperdiet ornare a non quam. Duis ligula est, aliquet at posuere in, sodales ac eros. Pellentesque at purus pulvinar turpis varius porttitor vitae sed diam. Maecenas elementum congue dui bibendum tempor. Vestibulum gravida,
  eros id malesuada elementum, est dolor semper odio, non interdum nulla sem quis mauris. Praesent ornare metus sed libero aliquet vehicula. Maecenas libero eros, hendrerit quis aliquet a, laoreet sit amet urna. Nullam leo eros, pulvinar in molestie a,
  tristique id velit. Vestibulum rhoncus, purus non tempus bibendum, metus libero lacinia urna, sed...

CSS

html,
body {
  height: 100%;
}

#status {
  position: fixed;
  background: white;
  padding: 3px;
  border: 2px solid #555;
}

p {}

JavaScript

var lastPos = 0;
$(window).scroll(function() {
  var currPos = $(document).scrollLeft();

  if (lastPos < currPos) {
    $('#current').html('Right');
  }
  if (lastPos > currPos) {
    $('#current').html('Left');
  }

  lastPos = currPos;
});