如何检测div中水平滚动的结束？

Question

我试图在div中实现水平滚动.我的问题是如何检测水平滚动的结束？

我试过这样的事

$(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;
 });
});

左端警报有效,因为它将对所有设备大小变为0.对于右端,它取决于设备大小.

屏幕:

JS小提琴:http://jsfiddle.net/arunslb123/trxe4n3u/

Answer 1

使用scrollWidth并width与您leftscrollwidth一起获得差异.在你的情况下有偏移,8所以它会给你的差异8可能是因为你的填充或边距.

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');
}

现场演示

使用outerWidth()来获取包括宽度的偏移量,

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

另一个Demo没有使用偏移量

Answer 2

试试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');
        }
    });
});