Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 : Horizontal scroll

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

like image 713
Arun Prakash Avatar asked Aug 18 '15 09:08

Arun Prakash


People also ask

How do you find end of scroll?

To detect scroll end with JavaScript, we can listen to the scroll event. Then in the event listener, we check if offsetHeight + scrollTop is bigger than or equal to scrollHeight . We get the div with document. querySelector .

How do you indicate horizontal scrolling?

Horizontal scrolling can be achieved by clicking and dragging a horizontal scroll bar, swiping sideways on a desktop trackpad or trackpad mouse, pressing left and right arrow keys, or swiping sideways with one's finger on a touchscreen.

Does scrollIntoView work horizontally?

scrollIntoView(true);", element); This works for vertical scrolling but not for horizontal.


4 Answers

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

like image 190
Rohan Kumar Avatar answered Oct 11 '22 03:10

Rohan Kumar


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');
        }
    });
});
like image 31
dangor Avatar answered Oct 11 '22 05:10

dangor


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');
      }
like image 2
Web pundit Avatar answered Oct 11 '22 03:10

Web pundit


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');
}
like image 1
Mahsan Nourani Avatar answered Oct 11 '22 04:10

Mahsan Nourani