javascript 如何检测div中水平滚动的结尾？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32068664/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect the end of a horizontal scroll in a div?
提问by Arun Prakash
I was trying to implement a horizontal scroll inside a div. My question is how can I detect the end of the horizontal scroll?
我试图在 div 内实现水平滚动。我的问题是如何检测水平滚动的结尾？
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.
左端警报有效，因为对于所有设备大小，它将变为 0。对于右端，这取决于设备尺寸。
Screen :
屏幕 ：
JS Fiddle : http://jsfiddle.net/arunslb123/trxe4n3u/
回答by Rohan Kumar
Use scrollWidthand widthalong with your leftscrollwidthto get the difference. In your case there is offset of 8so it will give the difference of 8it may be because of your padding or margin.
使用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');
}
Use the outerWidth()to get the offset including the width like,
使用externalWidth()来获取包括宽度在内的偏移量，
var $elem=$('#scrollquestion');
var newScrollLeft = $elem.scrollLeft(),
width=$elem.outerWidth(),
scrollWidth=$elem.get(0).scrollWidth;
if (scrollWidth-newScrollLeft==width) {
alert('right end');
}
回答by dangor
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');
}
});
});
回答by Web pundit
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');
}
回答by Mahsan Nourani
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. Changing it to the code below works perfect for me.
对我不起作用，因为计算 ($scrollWidth - $width) 创建了一个非常小的小数，使比较的左侧成为浮点数，而右侧 ($scrollLeft) 是一个整数。将其更改为下面的代码非常适合我。
if (parseInt($scrollWidth - $width) === parseInt($scrollLeft)) {
alert('right end');
}
