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/

Rohan Kumar · Accepted Answer · 2015-08-18T10:30:13.440

29

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

edited Aug 18 '15 at 10:30

answered Aug 18 '15 at 09:55

Rohan Kumar

40,431
11
76
106

can you tell me how offset is calculated as 8 here? EDIT : Thanks. Got it, it's because of padding is set as 4px. – Arun Prakash Aug 18 '15 at 10:05
the offset is the padding left and right but you can do it without the offset as below (posted as an answer) – Web pundit Aug 18 '15 at 10:08
In my case, I had to apply Math.ceil() under width, as it was different from `scrollWidth-newScrollLeft` by 0.1 px. – Alexander M. Apr 22 '20 at 20:05

dangor · Answer 2 · 2015-08-18T10:06:43.787

10

Try http://jsfiddle.net/trxe4n3u/3/

$(function() {
    $('#scrollquestion').scroll( function() {
        var $width = $('#scrollquestion').outerWidth()
        var $scrollWidth = $('#scrollquestion')[0].scrollWidth; 
        var $scrollLeft = $('#scrollquestion').scrollLeft();

        if ($scrollWidth - $width === $scrollLeft){
            alert('right end');
        }
        if ($scrollLeft===0){
            alert('left end');
        }
    });
});

edited Aug 18 '15 at 10:06

answered Aug 18 '15 at 09:50

dangor

455
3
10

1

Tried your code. left end works, but right end is not working. – Arun Prakash Aug 18 '15 at 09:56
@ArunPrakash change scrollLeft with `var scrollLeft = Math.round($('#scrollquestion').scrollLeft());` – Amir Achhodi Aug 22 '21 at 08:56
@ArunPrakash you need to remove the decimal, change that line : if (~~($scrollWidth - $width) === ~~$scrollLeft) – Elazar Zadiki Jun 26 '23 at 12:22

score 2 · Answer 3 · answered Aug 18 '15 at 10:10

Rohan kumar's answer is correct and works fine, but you can do this without calculating the offset manually

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

score 1 · Answer 4 · answered Aug 20 '19 at 16:42

For my specific case, dangor's solution with the

if ($scrollWidth - $width === $scrollLeft) {
        alert('right end');
}

did not work for me because calculating ($scrollWidth - $width) created a very small decimal that made the left-side of the comparison a float, and the right-side ($scrollLeft), an integer. Changing it to the code below works perfect for me.

if (parseInt($scrollWidth - $width) === parseInt($scrollLeft)) {
            alert('right end');
}

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

4 Answers4

Linked