[英]Scroll bottom in JavaScript
I have a working bottom function in JavaScript to detect if the user scrolls at the bottom. 我在JavaScript中有一个可运行的底部函数,用于检测用户是否在底部滚动。 However, a problem comes when the user has a strange resolution (like windows scale) or when you zoom.
但是,当用户的分辨率(例如Windows缩放比例)很奇怪或缩放时,就会出现问题。 The function is not working anymore and can't detect the bottom.
该功能不再起作用,无法检测到底部。
Here is what I did : 这是我所做的:
const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
if (bottom) {
this.props.getNewValues();
}
Is there a way to avoid that? 有办法避免这种情况吗? Even when you don't zoom, this is not working for people displaying the site on a TV or something like this (like a friend of mine did)
即使您不缩放,这对于在电视或类似设备上显示站点的人也无法工作(就像我的一个朋友所做的那样)
Thanks you 谢谢
EDIT : I'm applying this on a precise element and I repeat that my solution is working except by unzooming. 编辑:我将其应用于一个精确的元素,我重复我的解决方案正在工作,除非通过缩放。 Unzooming provides float values that made the response not really accurate (it goes from 1 to 50px of difference based on the zoom made)
取消缩放会提供浮动值,该值会使响应无法真正准确地显示(根据所进行的缩放,其差值在1到50像素之间)
I use this function (can't take credit as someone else wrote it - sorry for no credit - it was ages ago). 我使用了此功能(无法获得别人的赞誉-很抱歉,没有信用-很久以前了)。 Maybe you can adapt this to your use case:
也许您可以使它适应您的用例:
(function($) {
//CHECK SCROLLED INTO VIEW UTIL
function Utils() {
}
Utils.prototype = {
constructor: Utils,
isElementInView: function (element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
//END CHECK SCROLLED INTO VIEW UTIL
//USING THE ELEMENT IN VIEW UTIL
//this function tells what to do do when the element is or isnt in view.
//var inView = Utils.isElementInView(el, false); Where FALSE means the element doesnt need to be completely in view / TRUE would mean the element needs to be completely in view
function IsEInView(el) {
var inView = Utils.isElementInView(el, false);
if(inView) {
//console.log('in view');
} else {
//console.log('not in view');
}
};
//Check to make sure the element you want to be sure is visible is present on the page
var variableOfYourElement = $('#variableOfYourElement');
//if it is on this page run the function that checks to see if it is partially or fully in view
if( variableOfYourElement.length ) {
//run function on page load
IsEInView(variableOfYourElement);
//run function if the element scrolls into view
$(window).scroll(function(){
IsEInView(variableOfYourElement);
});
}
//END USING THE ELEMENT IN VIEW UTIL
})(jQuery);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.