Не автоматически. Вам нужно было бы отлавливать события прокрутки и каждый раз проверять их наличие, сравнивая координаты прямоугольника div с видимым прямоугольником страницы.
Вот минимальный пример.
<div id="importantdiv">hello</div>
<script type="text/javascript">
function VisibilityMonitor(element, showfn, hidefn) {
var isshown= false;
function check() {
if (rectsIntersect(getPageRect(), getElementRect(element)) !== isshown) {
isshown= !isshown;
isshown? showfn() : hidefn();
}
};
window.onscroll=window.onresize= check;
check();
}
function getPageRect() {
var isquirks= document.compatMode!=='BackCompat';
var page= isquirks? document.documentElement : document.body;
var x= page.scrollLeft;
var y= page.scrollTop;
var w= 'innerWidth' in window? window.innerWidth : page.clientWidth;
var h= 'innerHeight' in window? window.innerHeight : page.clientHeight;
return [x, y, x+w, y+h];
}
function getElementRect(element) {
var x= 0, y= 0;
var w= element.offsetWidth, h= element.offsetHeight;
while (element.offsetParent!==null) {
x+= element.offsetLeft;
y+= element.offsetTop;
element= element.offsetParent;
}
return [x, y, x+w, y+h];
}
function rectsIntersect(a, b) {
return a[0]<b[2] && a[2]>b[0] && a[1]<b[3] && a[3]>b[1];
}
VisibilityMonitor(
document.getElementById('importantdiv'),
function() {
alert('div in view!');
},
function() {
alert('div gone away!');
}
);
</script>
Вы можете улучшить это:
- заставляя его поймать
onscroll на всех предках, которые имеют overflow scroll или auto и корректируя верхний / левый координаты для их положений прокрутки
- обнаружение обрезки
overflow scroll, auto и hidden с выводом div за пределы экрана
- с использованием
addEventListener / attachEvent для разрешения нескольких мониторов VisibilityM и других вещей с использованием событий изменения размера / прокрутки
- некоторая совместимость взломана до
getElementRect, чтобы в некоторых случаях сделать более точными координаты, а некоторые отмены привязки событий, чтобы избежать утечек памяти в IE6-7, если вам действительно нужно.