如何检测一个div中的水平滚动的结束？ [英] How to detect the end of a horizontal scroll in a div?

问题描述

我试图在一个div内部实现一个水平滚动。我的问题是如何检测水平滚动的结束？

我试过类似的东西

<$ p $ （）{
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 Fiddle： http://jsfiddle.net/arunslb123/trxe4n3u/

解决方案使用 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'）; 
} 
  

现场演示

使用

  var $ elem = $（ '＃scrollquestion'）; 
 var newScrollLeft = $ elem.scrollLeft（），
 width = $ elem.outerWidth（），
 scrollWidth = $ elem.get（0）.scrollWidth; 
 if（scrollWidth-newScrollLeft == width）{
 alert（'right end'）; 
} 
  

另一个演示不使用偏移量

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/

解决方案

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

这篇关于如何检测一个div中的水平滚动的结束？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！