Запустите событие JavaScript, Когда DIV будет в поле зрения
Действительно ли возможно запустить определенное событие JavaScript, когда определенный DIV входит в представление на странице?
Скажите, например, у меня есть очень большая страница, как 2500x2500, и я имею 40x40 отделение, которое сидит в положении 1980x1250. Отделение не обязательно вручную расположено, это могло произойти там из-за содержания, продвинув его там. Теперь, действительно ли возможно выполнить функцию, когда пользователь прокручивает к точке, где отделение становится видимым?
2 ответа
В прошлом я использовал JCS . Можно настроить конфигурацию , чтобы выполнить необходимые действия. Я не уверен, что это будет соответствовать всем вашим требованиям/потребностям, но я обнаружил, что это будет довольно мощным, когда я использовал его.
-121--1501819-В этом примере используется оператор побитового сдвига «< <». Этот оператор берет биты и сдвигает их. Например, «1 < < 3» приводит к числу 8. Итак, в двоичном формате
customer = 0001
employee = 0010
supervisor = 0100
admin = 1000 (I think this was supposed to read 1 << 3)
Теперь можно назначить людям несколько ролей с помощью побитового оператора или. Это будет одна вертикальная полоса «|». Побитовый или комбинирует два числа бит за битом, устанавливая каждый бит, который установлен в любом из двух операндов.
myRole = customer | employee = 0011
Имеющийся у вас оператор if предназначен для того, чтобы определить, имеет ли кто-то определенную роль. Используется побитовое и: «&». Bitwise - и объединяет два числа, устанавливая бит только в том случае, если бит установлен в обоих операндах.
-121--4154835-Не автоматически. Вам придется каждый раз ловить события прокрутки и проверять, что они находятся в поле зрения, сравнивая координаты прямоугольника 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>
Это можно улучшить, выполнив команду
- catch
onscrollдля всех предков, у которыхoverflowscrollилиauto, и настроив верхние/левые сопутствующие орды для их позиций прокрутки - обнаружив
overflowscroll,autoиhiddenобрезка div за пределами экрана - с помощью
addEventListener/attachEvent, чтобы разрешить несколько VisibilMonitors и другие объекты с помощью событий resize/scroll - некоторые взломы совместимости до
getElityRect, чтобы сделать сопутствующие записи более точными в некоторых случаях и какое-то событие не связывается, чтобы избежать IE6-7 утечек памяти, если вам действительно нужно.
Вот пример стартера, используя jQuery:
<html>
<head><title>In View</title></head>
<body>
<div style="text-align:center; font-size:larger" id="top"></div>
<fieldset style="text-align:center; font-size:larger" id="middle">
<legend id="msg"></legend>
<div> </div>
<div id="findme">Here I am!!!</div>
</fieldset>
<div style="text-align:center; font-size:larger" id="bottom"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $findme = $('#findme'),
$msg = $('#msg');
function Scrolled() {
var findmeOffset = $findme.offset(),
findmeTop = findmeOffset.top,
scrollTop = $(document).scrollTop(),
visibleBottom = window.innerHeight;
if (findmeTop < scrollTop + visibleBottom) {
$msg.text('findme is visible');
}
else {
$msg.text('findme is NOT visible');
}
}
function Setup() {
var $top = $('#top'),
$bottom = $('#bottom');
$top.height(500);
$bottom.height(500);
$(window).scroll(function() {
Scrolled();
});
}
$(document).ready(function() {
Setup();
});
</script>
</body>
</html>
Это уведомляет только после того, как Div будет в поиске снизу. Этот пример не уведомляет, когда Div прокручивается из верхней части.