javascript - How to detect the end of a horizontal scroll in a div?

Question

I was trying to implement a horizontal scroll inside a div. My question is how can I detect the end of the horizontal scroll?

I tried something like this

$(function() {
var scrollLeftPrev=0;
$('#scrollquestion').scroll( function() {
  var newScrollLeft=$('#scrollquestion').scrollLeft();
  if(scrollLeftPrev===newScrollLeft){
    alert('right end');
  }
  if(newScrollLeft===0){
    alert('left end');
  }
  console.log($('#scrollquestion').width());
  console.log(newScrollLeft);
  scrollLeftPrev=newScrollLeft;
 });
});

left end alert works, since it will become 0 for all the device sizes. For right end, it depends on the device size.

Screen :

JS Fiddle : http://jsfiddle.net/arunslb123/trxe4n3u/

Answer 1

Use scrollWidth and width along with your leftscrollwidth to get the difference. In your case there is offset of 8 so it will give the difference of 8 it may be because of your padding or margin.

var $elem=$('#scrollquestion');
var newScrollLeft = $elem.scrollLeft(),
    width=$elem.width(),
    scrollWidth=$elem.get(0).scrollWidth;
var offset=8;
if (scrollWidth- newScrollLeft-width==offset) {
    alert('right end');
}

Live Demo

Use the outerWidth() to get the offset including the width like,

var $elem=$('#scrollquestion');
var newScrollLeft = $elem.scrollLeft(),
    width=$elem.outerWidth(),
    scrollWidth=$elem.get(0).scrollWidth;
if (scrollWidth-newScrollLeft==width) {
    alert('right end');
}

Another Demo without using offset