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 янв в 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 that you have read and understand our privacy policy and code of conduct.

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