[英]How to detect the end of a horizontal scroll in a div?
I was trying to implement a horizontal scroll inside a div. 我试图在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. 左端警报有效,因为它将对所有设备大小变为0。 For right end, it depends on the device size.
对于右端,它取决于设备大小。
JS Fiddle : http://jsfiddle.net/arunslb123/trxe4n3u/ JS小提琴: http : //jsfiddle.net/arunslb123/trxe4n3u/
Use scrollWidth
and width
along with your leftscrollwidth
to get the difference. 使用
scrollWidth
和width
以及leftscrollwidth
来获得差异。 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. 在你的情况下,偏移量为
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');
}
Use the outerWidth() to get the offset including the width like, 使用outerWidth()来获取包括宽度的偏移量,
var $elem=$('#scrollquestion');
var newScrollLeft = $elem.scrollLeft(),
width=$elem.outerWidth(),
scrollWidth=$elem.get(0).scrollWidth;
if (scrollWidth-newScrollLeft==width) {
alert('right end');
}
Try http://jsfiddle.net/trxe4n3u/3/ 试试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');
}
});
});
Rohan kumar's answer is correct and works fine, but you can do this without calculating the offset manually Rohan kumar的答案是正确的并且工作正常,但您可以在不手动计算偏移量的情况下执行此操作
var newScrollLeft=$('#scrollquestion').scrollLeft();
var divWidth = $('#scrollquestion').outerWidth();
var scrollwidth =$('#scrollquestion').get(0).scrollWidth;
if(newScrollLeft === scrollwidth - divWidth){
alert('right end');
}
For my specific case, dangor's solution with the 对于我的具体案例,dangor的解决方案
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. 因为计算($ scrollWidth - $ width)创建了一个非常小的小数,使得比较的左侧为浮点数,右侧($ scrollLeft)为整数,因此对我不起作用。 Changing it to the code below works perfect for me.
将其更改为下面的代码对我来说非常适合。
if (parseInt($scrollWidth - $width) === parseInt($scrollLeft)) {
alert('right end');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.