javascript - 如何检测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;
 });
});

left end alert 有效，因为对于所有设备尺寸它将变为 0。对于右端，它取决于设备尺寸。

屏幕:

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

Live Demo

使用 outerWidth()获得包括宽度在内的偏移量，

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