Здравствуйте, как определить что элемент в зоне видимости окна браузера. Допустим есть элемент и если пользователь видит его, то отметь элемент как просмотренный. Не знаю как опередить что элемент в зоне видимости.. Подскажите как можно опеределить
5 ответов
// Получаем нужный элемент
var element = document.querySelector('#target');
var Visible = function (target) {
// Все позиции элемента
var targetPosition = {
top: window.pageYOffset + target.getBoundingClientRect().top,
left: window.pageXOffset + target.getBoundingClientRect().left,
right: window.pageXOffset + target.getBoundingClientRect().right,
bottom: window.pageYOffset + target.getBoundingClientRect().bottom
},
// Получаем позиции окна
windowPosition = {
top: window.pageYOffset,
left: window.pageXOffset,
right: window.pageXOffset + document.documentElement.clientWidth,
bottom: window.pageYOffset + document.documentElement.clientHeight
};
if (targetPosition.bottom > windowPosition.top && // Если позиция нижней части элемента больше позиции верхней чайти окна, то элемент виден сверху
targetPosition.top < windowPosition.bottom && // Если позиция верхней части элемента меньше позиции нижней чайти окна, то элемент виден снизу
targetPosition.right > windowPosition.left && // Если позиция правой стороны элемента больше позиции левой части окна, то элемент виден слева
targetPosition.left < windowPosition.right) { // Если позиция левой стороны элемента меньше позиции правой чайти окна, то элемент виден справа
// Если элемент полностью видно, то запускаем следующий код
console.clear();
console.log('Вы видите элемент :)');
} else {
// Если элемент не видно, то запускаем этот код
console.clear();
};
};
// Запускаем функцию при прокрутке страницы
window.addEventListener('scroll', function() {
Visible (element);
});
// А также запустим функцию сразу. А то вдруг, элемент изначально видно
Visible (element);
body {
height: 6000px;
}
#target {
margin-top: 3000px;
}
<div id="target">Элемент</div>
-
1
-
@Yuri можно
console.clear
вынести заif-else
, чтобы он срабатывал всегда, тогда можно будет избавиться от блокаelse
.– ΝNL99324 янв в 7:40
вот еще вариант, только не забудьте подключить библиотеку jQuery
<script type="text/javascript">
$(document).ready(function(){
$(document).scroll(function(){
// проверяем
checkPosition();
});
// после загрузки страницы сразу проверяем
checkPosition();
// проверка при ресайзе страницы
$(window).resize(function(){
checkPosition();
});
});
// функция проверки полной видимости элемента
function checkPosition(){
// координаты дива
var div_position = $('.btinew').offset();
// отступ сверху
var div_top = div_position.top;
// отступ слева
var div_left = div_position.left;
// ширина
var div_width = $('.btinew').width();
// высота
var div_height = $('.btinew').height();
// проскроллено сверху
var top_scroll = $(document).scrollTop();
// проскроллено слева
var left_scroll = $(document).scrollLeft();
// ширина видимой страницы
var screen_width = $(window).width();
// высота видимой страницы
var screen_height = $(window).height();
// координаты углов видимой области
var see_x1 = left_scroll;
var see_x2 = screen_width + left_scroll;
var see_y1 = top_scroll;
var see_y2 = screen_height + top_scroll;
// координаты углов искомого элемента
var div_x1 = div_left;
var div_x2 = div_left + div_height;
var div_y1 = div_top;
var div_y2 = div_top + div_width;
// проверка - виден див полностью или нет
if( div_x1 >= see_x1 && div_x2 <= see_x2 && div_y1 >= see_y1 && div_y2 <= see_y2 ){
$.ajax({
type: "POST",
url: "functions/view_response.php",
dataType: "html",
cache: false,
});
}
}
</script>
<div class="btinew"></div>
Этот пример нашел на сайте http://vk-book.ru/proverit-vidimost-elementa-s-pomoshhyu-jquery/
Пишу в Стаковерфлоу первый раз, не обессудьте. Тоже понадобилась функция, проверяющая находится ли элемент в зоне видимости окна или нет. Вот написал свой код, все хорошо работает
function elem_in_visible_area(selector) {
let elem_p = $(selector),
elem_p_height = elem_p.height(),
offset_top_el = elem_p.offset().top,
offset_bottom_el = offset_top_el + elem_p.height(),
scrolled = $(window).scrollTop(),
scrolled_bottom = scrolled + $(window).height();
if (scrolled_bottom > offset_top_el && offset_bottom_el > scrolled) {
return true;
}
return false;
}
$(window).scroll(function() {
if (elem_in_visible_area('.block')) {
console.log('Элемент в зоне видимости');
}
})
-
2Это похвально - Вы молодец! Но уже существует специальное API для этой задачи. developer.mozilla.org/ru/docs/Web/API/Intersection_Observer_API– Dmytro11 янв 2022 в 13:34
-
Вот самое простое решение, сам почти пол дня убил на поиск, все было сложно и непонятно, потом решил сам сесть и написать.
$(window).on('scroll', () => { // По скроллу страници запускаеть функия
// В первую переменную мы получаем координаты относительно верха блока который нам нужен
// Во вторую мы получаем вертикальную позиицию скролла окна браузера
var blockPosition = $('.block').offset().top,
windowScrollPosition = $(window).scrollTop();
if( calcPosTopPosition < windowScrollPosition ) {
console.log('ok'); // Воуля
}
});
Вот пример: https://codepen.io/grande2k/pen/gOMgZKp
Вам в этом поможет Intersection Observer – https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
const callback = () => {
console.log('Я видим')
}
const options = {
threshold: 1.0 // 1 – полная видимость элемента, 0.5 – половина и т.д.
}
const observer = new IntersectionObserver(callback, options);
const target = document.querySelector('#myElement')
observer.observe(target)