Скрипт-игра. не скажу где используется и на что похоже;) Но это чудо эффективно может определить виден ли элемент клиенту (в текущем viewport'е) и как-то его отметить.
Собственно, листинг тестовой версии:
Собственно, листинг тестовой версии:
<html>
<head>
<title>TEST :: is element visible in viewport</title>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
/*
* Получение текущего вьюпорта: координаты верхнего левого угла и ширина с высотой
*/
function current_viewport()
{
var w = $(window);
return {
"left": w.scrollLeft(),
"top": w.scrollTop(),
"width": w.width(),
"height": w.height()
};
}
/*
* Проверка находится ли объект во вьюпорте
*
* paddings = {
* "left": ...,
* "top": ...,
* "right": ...,
* "bottom": ...
* }
* эффективно увеличивают размеры объекта. по умолчанию 0
*/
function in_viewport(selector, paddings)
{
var el = $(selector);
var off = el.offset();
var dim = {
"width": el.width(),
"height": el.height()
};
if(!paddings)
{
paddings = {
"left": 0,
"top": 0,
"right": 0,
"bottom": 0
};
}
var viewport = current_viewport();
return (
(off.top - paddings.top) >= viewport.top &&
(off.left - paddings.left) >= viewport.left &&
(off.top + dim.height + paddings.bottom) <= (viewport.top + viewport.height) &&
(off.left + dim.width + paddings.right) <= (viewport.left + viewport.width)
);
}
/*
* Помечает объект-ответ, как прочтенный
*/
function mark_as_read(obj)
{
$(obj).css({
"border": "1px solid #eeeeee"
});
$(obj).data('is_read', true);
}
$(document).ready(function() {
// паддинги для проверки попадает ли объект во вьюпорт
var paddings = {
"left": 0,
"top": 0,
"right": 0,
"bottom": 0
};
for(var i = 0; i < 40; i++)
{
$('<div class="ticket_reply"></div>').css({
"height": "100px",
"margin-bottom": "20px",
"border": "1px solid blue"
}).appendTo('body');
}
var replies = $('.ticket_reply');
replies.each(function(i) {
// отметим видимые при загрузке
if( in_viewport(this, paddings) )
mark_as_read(this);
});
// зарегистрируем проверку прочтения сообщений по скроллингу
$(window).scroll(function() {
replies.each(function(i) {
if( !$(this).data('is_read') && in_viewport(this, paddings) )
mark_as_read(this);
});
});
});
</script>
</head>
<body>
</body>
</html>
За основу взят вот этот пост на stackoverflow: http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
