如何在滚动期间检查javascript中的div是否在屏幕上 [英] how to check that a div is on screen in javascript during scroll
问题描述
你好frinds，
我必须检查分区是否在屏幕上。当我在Google上搜索时，我得到了一个解决方案。但它不起作用。
我的代码如下，请告诉我其中缺少的内容。
$ .fn.isOnScreen = function（x， y）{
if（x == null || typeof x =='undefined'）x = 1;
if（y == null || typeof y =='undefined'）y = 1;
var win = $（窗口）;
var viewport = {
top：win.scrollTop（），
left：win.scrollLeft（）
};
viewport.right = viewport.left + win.width（）;
viewport.bottom = viewport.top + win.height（）;
var height = this.outerHeight（）;
var width = this.outerWidth（）;
if（！width ||！height）{
返回false;
}
var bounds = this.offset（） ;
bounds.right = bounds.left + width;
bounds.bottom = bounds.top + height;
var visible =（！ （viewport.right< bounds.left || viewport.left> bounds.right || viewport.bottom< bounds.top || viewport.top> bounds.bottom））;
if（！visible）{
返回false;
}
var deltas =
{
top：Math.min（1，（bounds.bottom - viewport.top）/ height），
bottom：Math .min（1，（viewport.bottom - bounds.top）/ height），
left：Math.min（1，（bounds.right - viewport.left）/ width），
右：Math.min（1，（viewport.right - bounds.left）/ width）
};
return（deltas.left * deltas .right）> = x &&（deltas.top * deltas.bottom）> = y;
};
基于上面的代码，我正在查看条件window.onload方法中的页面加载。
过程如下....
$（窗口）.scroll（function（）
{
if（$（'＃my_div'） .isOnScreen（0.5,0.5）== true）{
if（ViewCount！= 1）{
ViewCount = 1;
AdToLoad = 0;
alert（'Yes'）;
}
}
else {
if（ViewCount！= 1）{
ViewCount = 0;
AdToLoad = 0;
}
}
}）;
但不起作用。它显示错误Uncaught TypeError：$（...）。isOnScreen不是一个函数。
我错过了什么。请指导。
.fn.isOnScreen = function（x，y）{
if（ x == null || typeof x =='undefined'）x = 1;
if（y == null || typeof y =='undefined'）y = 1;
var win =
（窗口）;
var viewport = {
top：win.scrollTop（），
left：win.scrollLeft（）
};
viewport .right = viewport.left + win.width（）;
viewport.bottom = viewport.top + win.height（）;
var height = this.outerHeight（）;
var width = this.outerWidth（）;
if（！width ||！高度）{
返回false;
}
var bounds = this.offset（）;
bounds。 right = bounds.left + width;
bounds.bottom = bounds.top + height;
var visible =（！（viewport.right< bo） unds.left || viewport.left> bounds.right || viewport.bottom< bounds.top || viewport.top> bounds.bottom））;
if（！visible）{
返回false;
}
var deltas =
{
top：Math.min（1，（bounds.bottom - viewport.top）/ height），
bottom：Math .min（1，（viewport.bottom - bounds.top）/ height），
left：Math.min（1，（bounds.right - viewport.left）/ width），
右：Math.min（1，（viewport.right - bounds.left）/ width）
};
return（deltas.left * deltas .right）> = x &&（deltas.top * deltas.bottom）> = y;
};
基于上面的代码，我正在查看条件window.onload方法中的页面加载。
过程如下....
（窗口）.scroll（function（）
{
if（
hello frinds ,
i have to check that a division is on screen or not . i get a solution when i was googling . but its not working.
my code is below , please tell me what i am missing in it .
$.fn.isOnScreen = function (x, y) {
if (x == null || typeof x == 'undefined') x = 1;
if (y == null || typeof y == 'undefined') y = 1;
var win = $(window);
var viewport = {
top: win.scrollTop(),
left: win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var height = this.outerHeight();
var width = this.outerWidth();
if (!width || !height) {
return false;
}
var bounds = this.offset();
bounds.right = bounds.left + width;
bounds.bottom = bounds.top + height;
var visible = (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
if (!visible) {
return false;
}
var deltas =
{
top: Math.min(1, (bounds.bottom - viewport.top) / height),
bottom: Math.min(1, (viewport.bottom - bounds.top) / height),
left: Math.min(1, (bounds.right - viewport.left) / width),
right: Math.min(1, (viewport.right - bounds.left) / width)
};
return (deltas.left * deltas.right) >= x && (deltas.top * deltas.bottom)>=y;
};
based on the above code , i am checking a condition on page load in window.onload method .
process is given below....
$(window).scroll(function ()
{
if ($('#my_div').isOnScreen(0.5, 0.5) == true) {
if (ViewCount != 1) {
ViewCount = 1;
AdToLoad = 0;
alert('Yes');
}
}
else {
if (ViewCount != 1) {
ViewCount = 0;
AdToLoad = 0;
}
}
});
but its not working . its showing error Uncaught TypeError: $(...).isOnScreen is not a function.
what i am missing in that . please guide.
.fn.isOnScreen = function (x, y) {
if (x == null || typeof x == 'undefined') x = 1;
if (y == null || typeof y == 'undefined') y = 1;
var win =
(window);
var viewport = {
top: win.scrollTop(),
left: win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var height = this.outerHeight();
var width = this.outerWidth();
if (!width || !height) {
return false;
}
var bounds = this.offset();
bounds.right = bounds.left + width;
bounds.bottom = bounds.top + height;
var visible = (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
if (!visible) {
return false;
}
var deltas =
{
top: Math.min(1, (bounds.bottom - viewport.top) / height),
bottom: Math.min(1, (viewport.bottom - bounds.top) / height),
left: Math.min(1, (bounds.right - viewport.left) / width),
right: Math.min(1, (viewport.right - bounds.left) / width)
};
return (deltas.left * deltas.right) >= x && (deltas.top * deltas.bottom)>=y;
};
based on the above code , i am checking a condition on page load in window.onload method .
process is given below....
(window).scroll(function ()
{
if (
这篇关于如何在滚动期间检查javascript中的div是否在屏幕上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
