15

Здравствуйте, как определить что элемент в зоне видимости окна браузера. Допустим есть элемент и если пользователь видит его, то отметь элемент как просмотренный. Не знаю как опередить что элемент в зоне видимости.. Подскажите как можно опеределить

0

5 ответов 5

35

// Получаем нужный элемент
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>

2
  • 1
    спасибо за ответ, отличный вариант! 19 мар 2017 в 13:57
  • @Yuri можно console.clear вынести за if-else, чтобы он срабатывал всегда, тогда можно будет избавиться от блока else.
    – ΝNL993
    24 янв 2023 в 7:40
5

вот еще вариант, только не забудьте подключить библиотеку 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/

4

Пишу в Стаковерфлоу первый раз, не обессудьте. Тоже понадобилась функция, проверяющая находится ли элемент в зоне видимости окна или нет. Вот написал свой код, все хорошо работает

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
  • 2
    Это похвально - Вы молодец! Но уже существует специальное API для этой задачи. developer.mozilla.org/ru/docs/Web/API/Intersection_Observer_API
    – Dmytro
    11 янв 2022 в 13:34
  • Спасибо, не знал. Задача упростилась в несколько раз
    – MrEld
    11 янв 2022 в 15:29
1

Вот самое простое решение, сам почти пол дня убил на поиск, все было сложно и непонятно, потом решил сам сесть и написать.

$(window).on('scroll', () => { // По скроллу страници запускаеть функия
  // В первую переменную мы получаем координаты относительно верха блока который нам нужен
  // Во вторую мы получаем вертикальную позиицию скролла окна браузера
    var blockPosition = $('.block').offset().top, 
          windowScrollPosition = $(window).scrollTop();
      
    if( calcPosTopPosition < windowScrollPosition ) {
        console.log('ok'); // Воуля
    }
});

Вот пример: https://codepen.io/grande2k/pen/gOMgZKp

0

Вам в этом поможет 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)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.